Override CSS Media Queries

Media Query Styles Not Overriding Original Styles

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

How to override applied CSS rules in media queries?

To answer the question can I override inline-css? ... Yes, by using !important.

Your real question:

By adding !important to your media query when the screen is big again. see following snippet (run in full screen and make screen smaller/bigger)

(function(){  $('button').on('click', function(e){    $('#test').slideToggle();  });})();

  @media screen and (min-width: 1000px) {   ul {    height:50px;    background-color: red;    width: 100%;   }   li {
    display: inline-block;    height: 50px;    line-height: 50px;    float:left;    margin-left: 50px;   }   #test {    display: block !important;   }   button {
    display: none !important;   }  }
  @media screen and (max-width: 1000px) {   ul {    background-color: red;    width: 100%;   }   li {    display: block;    height: 50px;    line-height: 50px;   }   #test {    display: none;   }   button {    display: block;   }  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="test"> <ul>  <li>This</li>  <li>Is</li>  <li>a</li>  <li>menu</li> </ul></div><button >Toggle menu</button>

Override styles in media queries with custom CSS

Actually media queries do not make specificity higher. That's the reason You declare them after the declaration they are modifying. So declaring them in Your css style should be enough, as long as you address all the properties contained in media queries (and their specificity is still the same).

Remember to load overrides.css after the styles you want to override.

---

Also the ugly hack (but completely in line with the css specs), alows You to battle specificity by chaining class and id selectors with themselves.

.class.class has higher specificty than .class, but lower than .class.class.class.

It is bad, but may cause less problems than !important.

---

In Your case, examples you proposed should work as long as override.css comes after the stylesheet(s) You modify.

// orginal.css
#criterionDetailsWrapper {
    background-color: green;
}

@media screen and (max-width: 979px) {
    #criterionDetailsWrapper {
        background-color: blue;
    }
}

@media screen and (max-width: 667px) {
    #criterionDetailsWrapper {
        background-color: grey;
    }
}

would be overwritten by:

// override.css
#criterionDetailsWrapper {
    background-color: grey;
}

On any screen size it will be grey now.

// override.css
#criterionDetailsWrapper {
   background-color: grey;
}

@media screen and (max-width: 600px) {
    #criterionDetailsWrapper {
        background-color: blue;
    }
}

It will have grey background now, unless the screen size is up to 600px, when it will have blue color. 979px and 667px will be ignored.

---

More on the topic:

Calculating specificity - W3C spec

how to override @media (max-width) using stylish

To override a media query you just need to load another media query - that also applies to your device - after it.

Well...you want a blunt media query that applies to everything. The best way is to use @media (min-width: 1px) since that includes all devices.

Now, put it all together - along with some other CSS cleanups like padding and margin removal and setting a new width for .mainContainer and you get this

#sidebar {
    display: none;
}
@media (min-width: 1px) {
    .mainContainer {
        margin: 0 auto;
        width: 100vw;
        padding: 0;
    }
    body>.container {
    padding: 0;
}
}

New code: (with different selector for width)

#sidebar {
    display: none;
}
@media (min-width: 1px) {
    .mainContainer { /*example styles*/
        margin: 0 auto;
        width: 100vw;
    }
    body>.container {
    padding: 0;
}
    body>.mainContainer>main {
    max-width: 100vw!important;

}
}

You still have to adjust the padding to your preference as setting the padding to 0 breaks the design a little bit but this should be good starting point.

Before:

After:

Can't overwrite CSS for media query

Media queries do not add specificity to a selector. They just control if the code inside is ignored or not.

Which means that...

@media (condition) {
  a selector {
    some value
  }
}
a selector {
  another value
}

...will always apply "another value", because it's placed later and has same specificity. You need to invert them and they will work as intended:

a selector {
  another value
}
@media (condition) {
  a selector {
    some value
  }
}

CSS media query not overriding styles

I made it work by deleting existing media queries and creating 2 media queries, one for devices with a max width of 800px and one for devices with a min width of 801px.

Why don't media queries override normal CSS?

In theory, no - you don't need the !important flag. The issue you are probably experiencing arrises from specificity:

Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied. Specificity is based on the matching rules which are composed of different sorts of CSS selectors

Mozzila

The basic math (hugely simplified) behind specificity is a weighted approach.

id is worth 100,
class is worth 10,
tag is worth 1.

Therefore a.class (tag + class = 11) is less specific that a#id (tag + id = 101).

CSS is also applied in a last-match-wins format, that is to say that the style for the last declared selector that matches will be applied (sorted according to the above specificity).

So - in your example, it could be that there are elements on you page with the class .element which is being targeted with a more specific selector (such as .container div > ul li + li .element (which is a lot more specific than just .element) so the styles from that is overriding the styles from your media style.

The caveat to this, is if the !important flag is being used. In which case the only way to override the styles is to supply the !important flag again.

---

Related Topics