0

I've looked at several posts on the subject (example, example), and my reasoning should be solid:

@media all and (max-width: 945px) {
    div#browser-nav-nav-bar a, div#browser-nav-nav-bar p {
        font-size: 0.8rem;
    }
}

div#browser-nav-nav-bar a, div#browser-nav-nav-bar p {
    color: rgb(255,255,255);
    font-size: 1.2rem;
    margin: 0 0.5rem;
    padding: 0.5rem 1rem;
    line-height: normal;
}

However, the font size isn't changing. I can't figure what I'm doing wrong. Here's a JSFiddle:

http://jsfiddle.net/2hLow0c5/

Community
  • 1
  • 1
dcgenjin
  • 1,108
  • 3
  • 12
  • 25

1 Answers1

4

Your selectors are identical (so have equal specificity) so the last font size defined will be the one that is applied.

Move the @media block to the end of the stylesheet.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • @somecbusnerd That's correct. The media query should be be after the main stylesheet or at the bottom of the style sheet after all the global styles. – Paul Aug 25 '14 at 02:43