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;
    }
}

Answer 2

I have been at least 2 hours trying to find the override CSS problem till I found that my line comments where wrong... And the second definition of CSS wasn't working:

So, don't be so stupid as I !:

/* LITTLE SCREENS */ 

@media screen and (max-width: 990px) {
    ... whatever ...
}

/*  BIG SCREENS */ 

@media screen and (min-width: 990px) {
    ... whatever more ...
}

never use: Double bar as I did:

// This is not a comment in CSS!

/* This is a comment in CSS! */

Answer 3

You need to link the media query file (queries.css) later than the normal css file (style.css). That way the rules in the queries.css will override those in style.css.

Answer 4

From the code you submitted, this probably won't resolve your issue. However, in your CSS if you are nesting styles inside of one another:

.main-container {
  .main {
    background: blue;
  }
}

A media query for .main won't work because of the nesting. Take .main out of .main-container and then the media query will work as assumed:

.main-container {

}

.main {
  background: blue;
}

Answer 5

What about using !important? If you range your media query from ( min-width: 176px ) and ( max-width: 736px ) or even up to 980px?