Media in CSS are not working with max width

Question

I;m trying media query in scss but is not working. I have code like this

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<style>
body {
  background: red;
}

@media (min-width: 460px) {
  body {
    background: yellow;
  }
}
@media (max-width: 459px) {
  body {
    background: black;
  }
}
</style>

now no media query is working for width 459px and background is red... (black is on max 458 and yellow on 460) but when I changed to

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<style>
body {
  background: red;
}

@media (min-width: 460px) {
  body {
    background: yellow;
  }
}
@media (max-width: 460px) {
  body {
    background: black;
  }
}
</style>

then black background is working for 459px but on 460px two media queries are working... how to fix that on max-width I will have only black background and on min-width only yellow?

Johannes · Accepted Answer · 2020-12-20T16:33:38.230

I would do it differently: Define a general rule first and then one media query for smaller screens, like this:

body {
  background: yellow;
}

@media (max-width: 460px) {
  body {
    background: black;
  }
}

Or the other way round, using a mobile-first approach:

body {
  background: black;
}

@media (min-width: 460px) {
  body {
    background: yellow;
  }
}

Both ways there is certainly no width where two seetings would collide, and no width where no setting would apply at all.

Media in CSS are not working with max width

1 Answers1