Css: Media Query is not working correctly?

Question

Hi I have a class Container so whenever I am trying to give it a width:1400px and test on 1900*1080 screen it always pick the wrong media query. i.e. 1200px screen property

@media (min-width: 1350px) {
.container {
    width: 1400px;
 }

}

 @media (min-width: 1200px) {
.container {
    width: 1140px;
 }
}

I have two media queries for different screens but on the bigger screen it still picks the smallest media query

Because 1900 is minimum 1200. Minimum means minimum, so everything bigger than 1200 matches it. — cloned, Jun 12 '22 at 10:23
[Why does the order of media queries matter in CSS?](https://stackoverflow.com/questions/8790321/why-does-the-order-of-media-queries-matter-in-css) — t.niese, Jun 12 '22 at 10:28

score 2 · Answer 1 · answered Jun 12 '22 at 10:21

You have to change the order of the media queries to:

@media (min-width: 1200px) {
 .container {
   width: 1140px;
 }
}

@media (min-width: 1350px) {
  .container {
    width: 1400px;
  }
}

A screen with at least 1350px width has also a width of at least 1200px.

So for a screen with 1900px width both media queries are true, and both .container rules are applied, and then the regular rules of CSS are applied, and the last .container rule takes precedence.

Css: Media Query is not working correctly?

1 Answers1