is there a way to prevent overflowing other than padding ?

I want it to almost touch the border radius

8 Replies

How have you created it (code)? any possible answers will probably depend on how you have added the grey shape behind the text.

i_lost_to_loba_kreygasmOP•3mo ago

.grid-breakout-about-left{
    background-color: rgba(0,0,0,0.07);
     grid-column: 2 / 3;
     border-top-right-radius:338px;
     border-bottom-right-radius:338px;
     padding-right: 128px;
     padding-block: 64px;
     
}

.grid-breakout-about-left{
    background-color: rgba(0,0,0,0.07);
     grid-column: 2 / 3;
     border-top-right-radius:338px;
     border-bottom-right-radius:338px;
     padding-right: 128px;
     padding-block: 64px;
     
}

do you want html too ? `css

 @media (max-width: 767px) {
.grid-breakout-about{
    display: block;
}
.grid-breakout-about-left{
    padding-inline:16px;
}
.grid-breakout-about-right{
    margin-left: 0;
    margin-top: 64px;
    padding-inline: 16px;
}
}

 @media (max-width: 767px) {
.grid-breakout-about{
    display: block;
}
.grid-breakout-about-left{
    padding-inline:16px;
}
.grid-breakout-about-right{
    margin-left: 0;
    margin-top: 64px;
    padding-inline: 16px;
}
}

Chris Bolson•3mo ago

It is not possible to know what you are doing with that small snippet of code. As always, the best thing to do would set up a Codepen with all the relevant code.

i_lost_to_loba_kreygasmOP•3mo ago

https://codepen.io/sougataghar47/pen/OPVwgMV

Sougata Ghar

CodePen

Untitled

...

i_lost_to_loba_kreygasmOP•3mo ago

go to small screens 🙂

Kevin Powell•3mo ago

.grid-breakout-about-left p {
  font-family: "Lato", sans-serif;
  font-size: 20px;
}
.grid-breakout-about-left li {
  font-family: "Lato", sans-serif;
  font-size: 20px;
}

.grid-breakout-about-left p {
  font-family: "Lato", sans-serif;
  font-size: 20px;
}
.grid-breakout-about-left li {
  font-family: "Lato", sans-serif;
  font-size: 20px;
}

this makes me break out into a cold sweat, please just do body for the selector 😅 border-radius is basically a decorative effect, it doesn't change the size of the box itself. With only a little padding on the right side, with such a big border radius, you can't do much about it... but you could remove this from inside your media query:

.grid-breakout-about-left{
    padding-inline:16px;
}

.grid-breakout-about-left{
    padding-inline:16px;
}

Either reduce the border radius at small sizes, or increase the padding to keep the text clear... or at least, that's all I can think of at the moment. Something like shape-inside would be handy here, but it's not currently something we have... we have shape-outside which you could use if you want to keep the padding small, but I think it would be a little annoying to set it up for this ype of shape.

Chris Bolson•3mo ago

~~Following on from Kevins suggestion, you could use a concave shape-outside element on the right of the text. Just putting together a demo....~~ hmm, the issue is how to define the height for the shape 🤔 I don't think that this will work as you don't have a fixed height. For the shape-outside path to work it needs to know the height.

Chris Bolson•3mo ago

This is what I was trying to achieve but, as I say, the issue is the height as clearly this expands as the viewport gets narrower. … of course we could define the height of the parent as an inline style using JS 🤔

Gaming

Programming

is there a way to prevent overflowing other than padding ?

Did you find this page helpful?