Is there a way to dynamically adjust the font size of a text element based on the width of its container?
Hi,
this is something very new in css, and still not available everywhere. This is not available inside Weweb for this reason.
What is your usecase? We may find a solution together for your problem 
If I’m not wrong, in case I am please correct me @aurelie, you could set the
font-size: 100%;
for the div
and
font-size: 1em;
for the text, or am I wrong? In my mind this is how em works, it takes the font size of the parent element. While rem takes the documents base font size.
Edit: I’m wrong on the 100% part, it takes the document root unit not the width, sadly… Nevermind. I’ll leave it here for someone who might look for this.
Yes I double checked before, but all relative sizes (%, em) in font are relative to the parent font-size, not its width
There is a new feature called container queries but its very very new
Seems like many big players are adopting it already
The use case is that I have a container with a background image set to “Cover”. In the left of the container I have text. There are elements in the right of the background image. When the page width is > 1100+, the text and background overlap in a satisfactory way. But I want to scale the text down slightly when the page width decreases further. Once I hit the tablet page break, its no longer an issue. But in the 1000’s, it overlaps in a way that I don’t like.
Hmmm, what i usually do is setting the text max-width to a percentage, and let the words wrap. Can it works for your usecase? An other approach can be to set a width in “ch” so that your text nicely break in two parts
I think you should use rem units and scale the base unit on page resize within your range. Wouldn’t that make sense @aurelie? This way he scales the fonts based on width.
The problem is that it will affect all the font size on the website. Also changing base fontsize is a bad practise as some accessibility tool (especially in Firefox) are trying to change them (and thats the reason why rem is a good practise ^^)
Thank you guys for trying to help. Unfortunately the wrapping wouldn’t really work since its large text and a couple of the lines are only a single word.
No worries, its not the end of the world.
So I’m trying to attempt something similar though not related to the size of the font but to the conditional rendering of an image within a container.
If my parent container is below a certain width, then change the display property of my image to none.
Any advice?
This is what’s set on the display condition of the image.
