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

user_14233497 0
Viewed 13866

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
}
css
2 Answers

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 */
}
user_142340850

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;}
}
user_60768630
Related