Font size shrinks as browser widnow shrinks

HTML & CSS
1

Is there a way to accomplish this. I have piece of text inside div and I would like text to shrink or expand as i resize browser window

2

Set the size as a %

3

I tried that and it didnt work https://jsfiddle.net/ex8u7k9f/1/

4

You can use @media with a range of font sizes at various viewport widths. The other option is to set the font size in vw units, but you have to test it carefully, as it can lead to unreadable results if you’re not careful—so you really need @media there too.

5

Your JSFiddle example didn’t work because of a typo 80%% instead of 80%.

#logo {
    font-size: 80%%;
    margin: auto;
}
6

You should use vw rather than % for font-size.
Note: 1vw = 1% of browser width.
But as Ralph mentioned, it is a good idea to add a media query to set a minimum font size, or it may get microscopic on small screens.
Also be aware that vw is browser width, not container width, so the 10% width container will have no bearing on the font size.
Changing font-size to 3vw in your fiddle seems to work OK.

1 Like
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.