Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why do I have to put media queries at the bottom of the stylesheet?

I am new to learning responsive design. What I have noticed on my journey is that when I put media queries at the bottom of the stylesheet, everything works flawlessly in regards to breakpoints. If I put the media queries at the top of the stylesheet, nothing works, and only recently I found out that I need to add !important and max-DEVICE-width ( as opposed to max-width) to the css that is being changed.

Why is this? Why do the media queries work on both desktop and mobile when put at the bottom of the stylesheet.

Why is it that when I put media queries on the top of the stylesheet I need to add !important and also max-DEVICE-width in order for the breakpoints to work on desktop and mobile?

like image 506
user3784012 Avatar asked Jun 27 '14 16:06

user3784012


Video Answer


1 Answers

Because css is read from top to bottom. The rule that is set last, is the one that will be executed.

Translating, it is like this:

@media (max-width: 600px) { //If my screen fits this size
    .text {
        color: red; //Paint it red
    }
}

.text {
    color: yellow; //Now, forget about everything and paint it yellow!
}

When you add !important is like saying:

@media (max-width: 600px) { //If my screen fits this size
    .text {
        color: red !important; //Paint it red, and don't change it ever!!!
    }
}

.text {
    color: yellow; //Ok, I'm not going to paint it yellow....
}
like image 192
LcSalazar Avatar answered Sep 24 '22 06:09

LcSalazar