CODEWITHSUNDEEP
htmlcssresponsive-design
Nikki_Heights
Nikki_Heights

Reputation: 115

font size 100 percent with an exception

I am building a responsive webpage and would like the font of my page set to 100% with the exception of the navigation text, which is to remain consistent. I thought targeting the nav font-size via media queries would do that trick, then I thought add important would work, but sadly, no luck.

@media (max-width: 950px) {
    body {font-size:95%;}

    nav {font-size:100% !important;}
}

Upvotes: 0

Views: 71

Answers (2)

Lucky Chingi
Lucky Chingi

Reputation: 2258

Move nav {font-size:100% !important;} outside any media queries

Upvotes: 0

Adjit
Adjit

Reputation: 10305

Since you want all of your fonts on the page to be 100% except for the nav elements you are setting up your percentages wrong. Also, unsure why you have this set in the media query.

In order to understand the example below you need to understand that since you have the font-size of body set to 150%, by setting the nav font-size to 95% you are now setting the nav font-size to 95% of 150%, which would be equivalent to 142.5%. Font sizes percentages are relative to their parents.

Here is what I suggest:

#navContainer {
  font-size: 150%;
}

nav {
  font-size: 95%;
}

#standalone_Nav nav {
  font-size: 142.5%;
}
<div id="navContainer">
  <div>This is body text at 150%</div>
  <nav>This is Nav Text at 95% of 150%</nav>
</div>

<div id="standalone_Nav">
  Standalone standard text
  <nav>Nav text set at 142.5%</nav>
</div>

Upvotes: 1

Related Questions