4

I'm setting up the stylesheets for a responsive website, and want to provide different layouts for screens with width >= 768px and screens with width < 768px. However, when i use @media (max-width: 767px), both the 767px and 768px are affected with the media query contents.

I've tried using @media (max-width: 768px) instead, but it (as expected) applied the media query contents to 768px, which is not the outcome i need.

You can try this code in any page (I tried it on Firefox and Chrome, with the same results):

body {
  background: red;
}

@media (max-width: 767px) {
  body {
    background: green;
  }
}

I created a fiddle where you can see the problem: https://jsfiddle.net/e0hdyqc9/

When you add these rules to a page, both 767px and 768px are red. However, if you try replacing 767px by 768px, you'll find that now both 767px and 768px are green! How is that possible?

Improve this question
3
  • personally i would use 768px as my break point because it is also a bootstrap breakpoint. which can be seen here: bootstrapcreative.com/bootstrap-4-media-queries and I mean it is 1px difference I really don't think it will be the end of the world. Commented Jul 1, 2019 at 22:16
  • 3
    For anyone reading this in the future. I, too, had this annoying problem and I finally found out it was a Windows 10 issue, your scaling setting is probably set to 125% or higher, set it back to 100%, and then max-width media queries would work as expected (i.e. inclusively). Commented Nov 14, 2020 at 21:19
  • For me, the issue wasn't with 125% scaling in windows (which I continue to use). Instead, the issue was displaying my screen on my external monitor connected with my laptop (through hdmi if it matters). In that scenario, I would get the media queries being off by 1px. However, if I displayed my screen on my laptop monitor, that no longer happened and everything worked normally with the css media queries working exactly as they're supposed to. Commented Aug 5, 2021 at 15:06

1 Answer 1

Reset to default
1

Put this in the page header: 

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

Add this CSS: 

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

@media only screen and (min-width:768px) {
  body { background-color: yellow;}}

The red background will not show because of the min & max values!

When the width=767px is green & the width=768px is yellow, there won't be space for red.

enter image description here

enter image description here

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Your images didn't load for me, it looks like Imgur is down. However, it still isn't working for me. When the width=767px, the body is white! You can see it happening on this fiddle: jsfiddle.net/e0hdyqc9
Actually, it seems that this issue is only happening on my machine. I tried the fiddle on other machines and its working for them, so I'm accepting your answer as it is the correct, standards compliant solution. Thanks!
For anyone reading this in the future. I, too, had this annoying problem and I finally found out it was a Windows 10 issue, your scaling setting is probably set to 125% or higher, set it back to 100%, and then max-width media queries would work as expected (i.e. inclusively).
@Arad Can confirm this solution. Do you know why windows is affecting media queries?
@dude Glad it helped. But no, I don't exactly know WHY this problem exists, unfortunately.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.