[Solved] Keep having to use !important

[IzStubbz]

Well, I’m mostly a PHP guy, and I’m wanting to improve my design skills. I know a fair amount of CSS (Sass, Scout etc) and I’m able to create a few good looking designs. However, I have a slight problem.

When I’m using “@media screen” to make my site device friendly, I’m having to constantly use “!important” to override my current CSS properties which I’ve declared at the top of my stylesheet otherwise my properties don’t take effect.

Any reason for this? Because I’ve never really experienced this kind of issue before.

[Alen]

One way to avoid specificity is to use classes and take a mobile first approach. Quick example:

http://codepen.io/alenabdula/pen/VLaqYM

[IzStubbz]

Top of stylesheet:
nav.main-nav {
display: inline-block;
}

Bottom of stylesheet:
@media screen and (max-width: 600px) {
nav.main-nav {
/Doesn’t work unless I use !important/
display: block;
}
}

I don’t want to keep using !important because I heard it’s not really good to over use it. Plus, it’s also effecting the thing I’m trying to accomplish.

[IzStubbz]

Alen – This for some reason didn’t work either :(

[IzStubbz]

Yeah sure.
http://codepen.io/anon/pen/Xbdoep

[IzStubbz]

Brilliant. That’s sorted it. Thanks a lot for your help. Much appreciated.

[Author]

Posts