CODEWITHSUNDEEP
css
dcgenjin
dcgenjin

Reputation: 1108

"@media all and (max-width: 945px)" not changing font-size at and below 945px

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/

Upvotes: 0

Views: 131

Answers (1)

Quentin
Quentin

Reputation: 944158

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.

Upvotes: 4

Related Questions