Reputation: 115
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
Reputation: 2258
Move nav {font-size:100% !important;}
outside any media queries
Upvotes: 0
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