Override CSS media queries

Question

I work with a page every day that uses CSS media queries I don\'t like; I\'d rather use the full page (most of them are related to the Twitter Bootstrap menu collapsing when

Answer 1

Would like to override bootstraps responsive.css too.

I have half of the website where I want to use the default responsive.css while for another half one media query causes wrong layouts so I want to remove it.

According to my research css does not allow to remove a media query.

So I will go and copy responsive.css and remove the media query. If you have no access to the source, overrides might be the only choice.

Answer 2

Why wouldn't you remove them in the first place?

If you can't, you still can override a CSS declaration with rules:

• that have the same selector priority and come after the MQ block
• that have higher selector priority than the rule in the MQ block
• that have !important between the value and the semi-colon

    /* one id, one class AND one element => higher priority */
    #id element.class { property: value2; }

    /* !important will nuke priorities. Same side effects as a nuke,
       don't do that at home except if you've tried other methods */
    #id .class { property: value2 !important; }

    @media(blah) {
      /* Overridden. Thrice. */
      #id .class { property: value1; }
    }

    /* same selector, same everything except it comes after the one in @media?
       Then the latter is applied.
       Being in a @media doesn't give any more priority (but it won't be applied
       everywhere, depending on "blah", that's the point of MQ) */
    #id .class { property: value2; }

In the previous example, any of the declaration outside the @media block will override the one inside, e.g. there are 3 reasons why value2 will be applied and not value1.