Beware of !important

I learned a powerful lesson today while modifying my blog (yes, the one you’re reading right now!). I was messing with the site title as I was trying to get the size correctly responsive.

You may already be aware of the @media only keywords, where the max-width variable can be changed depending on the target screen size.
@media only screen and (max-width: 1000px)

Well, I was using that, and was also using !important on some lines (because wordpress allows for the combination of the native theme’s CSS file plus your own custom CSS file, and I’m lazy).

What I did not realise, is that the !important tag not only forces the rule for the related objects on the DOM, it disregards the @media only filter! So the rules I had flagged were being applied to all sizes!

So, I did what I should have done, and did it right.

Anyway, I hope that helps.