CODEWITHSUNDEEP
htmlcssresponsive-design
theBartender
theBartender

Reputation: 127

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">

Upvotes: 1

Views: 3496

Answers (3)

Lime
Lime

Reputation: 13532

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

.some-paragraph{
    font-size: 5vw !important;
}

Upvotes: 1

Harley
Harley

Reputation: 395

I believe you have to change it based on the media query. So, cleaning it up a bit, this worked for me. Hope this helps.

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

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

@media only screen and (max-width: 720px) {

   #big_paragraph  { 
      font-size: 150%; 
   }

}
    <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 -->

Upvotes: 1

jshedrof
jshedrof

Reputation: 19

Your code seems to be working just fine for me.

I would however recommend using a class instead of an id so that you can reuse the css if needed later.

I would have made this a comment, but I do not have that ability yet.

Upvotes: 0

Related Questions