Media Query Styles Not Overriding Original Styles

Question

I\'m attempting to use some media queries for a website I\'m building. The problem I\'m having however, is while the media query styles are actually being applied, they\'re

Answer 1

The selectors in your original CSS have the same specificity as the selectors within your media queries (the first declarations are also targeting the same property - width) and because the media query rule set is being overridden I'm going to assume that it appears before the original rule set.

The second media query selector works because it's targeting a property that wasn't set in your original CSS, so specificity isn't relevant.

To have the first media query selector take precedence, prepend an ancestor element to it:

@media screen and (max-width:1024px) {
    body #global-wrapper-outer > #global-wrapper-inner {
         width: 100%;
    }
    #global-wrapper-outer > #global-wrapper-inner > nav {
        display: none;
    }
}