How to use multiple media queries in a single CSS file.?

Question

How could i apply different media queries in a single CSS file.I am applying the below queries but only the latest one works..

@media only screen and (max-width: 500px){
      css styling here
}

@media only screen and (max-width: 600px){
     css styling here
}

both should work, do you use !important rules somewhere that overrule the @mediaonly? — Ramon de Vries, Sep 09 '20 at 11:11
This helps you https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Creating_complex_media_queries — Rayees AC, Sep 09 '20 at 11:15
may this may help you to understand https://stackoverflow.com/a/8792163/2007927 — george, Sep 09 '20 at 11:17
https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance — ksav, Sep 09 '20 at 11:38

SeeoX · Answer 1 · 2021-03-16T18:18:26.017

8

If you're defining the same CSS properties of the same elements, the last definition will have priority.

In this case, here is a solution :

@media only screen and (max-width: 500px){
    /* CSS apply on width between 0 and 500px */
}
@media only screen and (max-width: 600px) and (min-width: 501px){
    /* CSS apply on width between 501px and 600px */
}

edited Mar 16 '21 at 18:18

answered Sep 09 '20 at 11:15

SeeoX

565
3
18

1

Why semicolon after 501px? – Cloud Walker Mar 14 '21 at 20:08
Was a mistake (do not seems to be authorized). Post has been edited in this way. Thanks. – SeeoX Mar 16 '21 at 18:20

score 6 · Accepted Answer · answered Sep 09 '20 at 11:24

The meta tag should be added in the <head> tag in HTML document. Please check that have you added

<meta name="viewport" content="width=device-width, initial-scale=1">

The sequential order of css code also matters. Please change sequence by following:

@media only screen and (max-width: 600px){
      body{ background:green;}
}

@media only screen and (max-width: 500px){
    body{ background:red;}
}

How to use multiple media queries in a single CSS file.?

2 Answers2