Why does the background color scale down more than the font?
Why does this happen and what to do about it? I have a normal div with lots of text and a background color and a font size of 2rem. When I start reducing the width, after some point the the text and background-color start to scale down disproportionately. Any explanation would be appreciated.
Here's a code pen link, but doing this locally on the machine would reproduce the issue better.
https://codepen.io/prashant6299/pen/JjQGWpK
8 Replies
that's because the text is too big for the viewport
The background color will scale the way you tell it, but the font will eventually overflow from its container when you try to shrink it to a point where the target size of the container is smaller than the width of any particular word
all you need to do is ... reduce the font size
or try to make wordwrap work
Thanks for the response, that's insightful, although i couldn't find this documented anywhere, is there a source? and also what is usually done in this case?
Thanks for the help.
What do you mean by making wordwrap work?
exactly that
i don't know how to explain it any better
either a media query, or using a font size that's defined with clamp and using vw as one of the components (and always, always, always having a
rem component in the middle term of the clamp)that is a better solution, yes
Thanks a lot guys.