Media Query CSS important

Question

Making responsive website,

I wrote this, it doesn't work.

@media (max-width: 767px) {
    #nav { display:block; }
}

but, I wrote this, it works!

@media (max-width: 767px) {
    #nav { display:block !important; }
}

Why? :(

Perhaps there's a selector somewhere which has a higher priority. read about [CSS specificity](http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/). — Hashem Qolami, Aug 26 '13 at 13:18

score 0 · Answer 1 · answered Aug 26 '13 at 13:20

0

Check your css code , something with higher specificity is changing your #nav element.

answered Aug 26 '13 at 13:20

Mostafa Elgaafary

1,552
2
13
11

score 0 · Answer 2 · answered Aug 26 '13 at 13:20

0

This is a little concept:

!important after the style attribute gives high priority to that style. That is why your css is working then. !important override the existing stylesheet attribute defined in same context.

answered Aug 26 '13 at 13:20

Ashwani

3,463
1
24
31

score 0 · Answer 3 · edited May 23 '17 at 12:13

!important will override any inline style, or more specific style that may be taking precedence on your page.

For example, you can override the style on this element...

<div style='background-color:white'></div>

by adding this in your stylesheet...

div { background-color: black !important }

But!, if you add !important to the inline style, it will then take precedence, for example...

<div style='background-color:white !important'></div>

here is a good stackoverflow answer explaining the concept in a bit more detail.

Media Query CSS important

3 Answers3