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 narrower than 768px).

Is there a way to override Bootstrap's media queries with CSS? Preferably without defining my own media queries to override all of the rules individually, as I feel like this would take a pretty long time.

Edit: I don't have control of the source code, otherwise I'd just kill the bootstrap-responsive code.

Answer 1

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.