theBartender theBartender - 1 year ago 83
CSS Question

Font is NOT resizing with rems

It should be simple, but for whatever reason rem isn't working for me.

For example I have

<div id="big_paragraph">
<p>I will make sure you get upvoted,</p>
<p>if you answer this simple question</p>
<p>for me. Thanks!</p>
</div><!-- big_paragraph -->


And I want the font-size to be responsive, so in my CSS I have

* {
margin:0;
padding:0;
border:none;
}

html{
font-size: 62.5%;
/* I also tried font-size: 16px; to no avail */
}

body{
font-family: 'Muli', sans-serif;
}

#big_paragraph{
margin-top:101px;
font-size: 4.1rem;/*41px*/
text-align:center;
}


I don't know if it matters but I also have the following in my head section of my html

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Answer Source

This should work but would probably only work in modern browsers.

.some-paragraph{
    font-size: 5vw !important;
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download