Default CSS Overriding Media Query

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

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.

Default CSS overriding media query

I thought media queries were to overrule generic class rules,

Rules inside a MQ are rules like any other one in terms of priority of their selector, except they will only apply depending on the conditions of the at-media.

(...) I also realize that the rule for non-media-queried
container h1 is declared AFTER the media query rule.

You found the correct reason: both rules have exactly the same priority (specificity) as they have the exact same selector. If a property is part of both rules (and the declaration is valid and both of them or none of them has !important modifier), then the value of the last declaration written will apply.

That's the reason you'll always find MQ written at the end (except rules applying to IE8- via conditional classes, no possible overlap between MQ and modern browsers and IE8- :) )

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.

How to use media queries to override default styles

A general answer is specificity, where the rules in the media query has a lower specificity than the original rule.

I.e, in this rule it has only one class, .topblock {...}

@media only screen and (min-width: 1500px) {
    .topBlock, .fourthBlock {
    padding: 20px 190px !important;
 }
}

but its original rule appears to have 2 classes .footerWrapper .topBlock {...}

So for that to work in the media query, do like this

@media only screen and (min-width: 1500px) {
    .footerWrapper .topBlock, .footerWrapper .fourthBlock {
    padding: 20px 190px;
 }
}

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.

Media query overriding my default css

Hey so you're last media query is just asking for if the screen is orientation: landscape, which means the width of the screen is wider than the height of the screen. This applies to desktop too.

So yea just remove that last one, or usually we combine it like: screen and (max-width: 1024px) and (orientation: landscape)

If you want you can just separate out each media query to make it more clear, combined with commas like this is a little confusing.

CSS media query not overriding original styling

You have a semicolon here

@media only screen and (max-width: 959px;){

Remove it and it will behave as expected. I don't know Notepad++'s settings, but I recommend getting an editor that highlights minor issues like this. Or just use something like jsfiddle.

There are also numerous issues throughout your HTML and CSS, like unclosed tags, using b instead of strong, your CSS for *'s padding is using a semicolon instead of a colon.

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>