18

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?

Radllaufer
  • 187
  • 1
  • 2
  • 10
user3784012
  • 183
  • 1
  • 1
  • 5
  • 5
    It's the rule of overwriting styles... All the ones below will overwrite the ones on top... Unless you use important! If you do it in the right order you don't have to use that. – John Jun 27 '14 at 16:50
  • @John - This is an answer, not a comment. The OP cannot accept a comment. – Andrei Volgin Jun 27 '14 at 16:54
  • 1
    Yeah well answering easy questions has gotten me downvoted before... I don't make the community nor do I agree with that why but I've had the only answer and still got downvoted. – John Jun 27 '14 at 16:59
  • 1
    As a note: you should be able to avoid using `!important` by [increasing the specificity](http://specificity.keegan.st) of your media query styles – binaryfunt Sep 16 '15 at 12:18

5 Answers5

27

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....
}
LcSalazar
  • 16,524
  • 3
  • 37
  • 69
  • 1
    The statement "Css is read from top to bottom" is not entirely true, there is also specificity of selector, a more specific selector can override a less specific selector even if it is placed higher in the file. https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity – Red Bit Jan 09 '19 at 10:57
  • @RedBit, yes, but in this case the specificity would work as the !important clause. The document is still read from top to bottom, but the selectors may define which clause is kept. And if two selectors have the same specificity value, the later one will prevail. – LcSalazar Feb 05 '21 at 21:31
4

CSS is read from top to bottom. Everything that is below some other css will overwrite what's on top of it. It is possible however to use !important at the end of a CSS parameter to make it overwrite everything else

body{
    background-color: black !important;
}

body{
    background-color: pink;
}

The background-color will be black. If you remove the !important, it will be pink.

Takoyaro
  • 928
  • 7
  • 14
1

Media queries cascade with the rest of the stylesheet. You can intersperse media queries within your stylesheet, and so you can also cascade styles as needed.

For example:

.my-class {
    color: red;
}

.my-class--modifier {
    color: blue;
}

@media screen and (min-width: 760px) {
    .my-class--modifier {
        color: green;
    }
}

.some-other-class {
    width: 200px;
}

@media screen and (min-width: 760px) {
    .some-other-class {
        width: 700px;
        background-color: gray;
    }
    .some-other-class .my-class {
        border: 2px solid red;
        border-radius: 4pt;
    }
}

This works precisely due to CSS's cascading nature. You can organize media queries as required based on sections, individual selectors and more.

Mark
  • 317
  • 1
  • 3
  • 17
0

Basically you are using media queries when you want to apply CSS styles depending on a device's general type (such as print vs. screen), specific characteristics (such as the width of the browser viewport, or environment (such as ambient light conditions).

When you started designing, you generally started doing it for one device of known specifications. So you design it according to you current device and then apply it for other screen sizes.

Hence the order goes like this: Make complete design --> Add the media query to fit for desired screen sizes at the bottom.

AKNair
  • 1,369
  • 1
  • 12
  • 24
-1

It is preferrable to write the query at the bottom became of precedence. That will save you from stress of using important! everytime.

Taiwo Rufus Covenant
  • 1