Media Queries firing at wrong width

Question

I am building a responsive page and the media queries are firing at the wrong width size. I am using Chrome.

@media screen and (max-width: 1200px) {
 .logo-pic {
    display: none;
}
}

For example, this rule works it just fires at wrong size. This rule fires at 1320px and not 1200px. I have the meta tag for html in place. It seems to be firing the media query 100 or so pixel wider than it normall should.

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

I checked the previous responsive site I made and those breakpoints are firing correctly. I've tested the browser on different websites and the media queries are fine as well.

I found a similiar question on stack overflow but it went unanswered.

Media Queries breakpoint at wrong value

Not sure what the problem is?

Period

Could it have to do with device pixel ratio? – Hampton

I'm not 100%$ sure. My other responsive site breaks at the correct values. I am using the exact same laptop and browser for both projects. – Period

So it "fires" at 1320 but not at 1321? Are you sure that this rule is not being overridden by a later rule for .logo-pic? What rules does the style inspector show being applied or overridden when you inspect the .logo-pic element? – Thrombo

Please provide the website URL – Norma

Try to narrow your search. Create a new html file with only one element that has this class and a link to your css file. If it's still behaving wrong you'll know the problem is somewhere in the css. – Impinge

I think you have your browser zoomed in at 110% (1200 * 1.10 = 1320). Please try pressing Ctrl+0 to revert to 100% – Billmyre

Agreed with @ckuijjer. Use Chrome's element inspector to check the computed width of body element with browser window maximized. See if there is a difference of more than few pixels. – Chryselephantine

@Billmyre You are correct. The browser zoom was the issue. I reset the zoom on my browser and everything was fine. Thank you – Period

Answer 1

A common reason this happens is if you have zoomed the browser window to a size other than 100%. In your browser, select the drop-down menu 'View' and make sure it is set to 100%. If you are zoomed in or out, it will trigger media-queries inappropriately.

And don't worry about feeling embarrassed. It has probably happened, or will happen to everyone.. but only once.

---

In order to avoid this issue all together, you should considering defining your media queries using a relative units (em or rem rather than px).

---

You can also enforce setting the browser zoom level to 100% on page load using javascript.

document.body.style.webkitTransform =  'scale(1)';
document.body.style.msTransform =   'scale(100)';
document.body.style.transform = 'scale(1)';
document.body.style.zoom = screen.logicalXDPI / screen.deviceXDPI;

Demolition

Ugh! Thank you for saving me hours of debugging my CSS. I didn't even realize it was zoomed. By the way, at least in Chrome on Windows, you can also just hit CTRL-0 to return to 100%. – Winburn

"you should considering defining your media queries using a relative units" No you don't – License

You can also enforce setting the browser zoom level to 100% on page load using javascript - this is bad accessibility/UX and you shouldn't ever force a zoom level – Hootchykootchy

The keyboard shortcuts come in handy to fix this. On Windows hold Ctrl and press + to zoom in and - to zoom out. On Mac hold command and press + to zoom in and - to zoom out. – Thant

Answer 2

Just a short addition, to prevent others from searching further even though the answer is given here.

My zoom was already set to 100%, and still the issue was there. If you experience the same, the answer is simple: set your zoom to 90% and back to 100%, et voila, breakpoints on the width you want 'm.

Whitelivered

This must be a chrome bug. I was aware of this being a possible issue and was hitting CMD 0 to reset zoom to 100%. This didn't work until I increased zoom using CMD + to get it to 100%, now if i change the zoom CMD 0 brings it back to 100%. – Slab

kind of the same here in firefox, I had to get out of adaptative view and THEN perform the zoom reset – Barrister

Answer 3

Another addition. After an hour of debugging I realized I had coded multiple media queries and because css files are executed from top to bottom, I was overriding previous media query logic. Ex:

@media (max-width: 700px) {
 .some-class { background-color: red; }
};

// This will override the above styling (assuming max-width logic is true)
@media (max-width: 800px) {
 .some-class { background-color: yellow; }
};

Cathartic

I felt so dumb after identifying my error :/. Thanks a lot btw. – Speculation

Answer 4

I also had some problems with media queries in Chrome.

As soon as I toggled device toolbar, the scaling was just wrong. The following

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

fixed this issue.

Julissa

Answer 5

Do you have iframes (or modals or smaller windows) loading the same CSS sheet with your media query ? If it's the case, it's a cache problem, and you need to link the CSS file with a dumb param like :

<link href="myCss.css?iframe=1" />

In order to load the css file as a new file instead of taking the cached version ... I hope I'm clear :)

Phenomenal

Another gotcha with iFrames is to remember your @media queries are reading the container width not the window width. That means the calculation is parent container + margins, padding and other arbitrary widths between the container and window edges. This can be tested by looking at the iFrame's container width calculation in your developer panel. Easily forgotten when viewing in chrome's responsive mode. – Hydr

Answer 6

I experienced this issue recently and I worked out it was the scrollbar that was causing the issue. I found this answer relating to the problem:

https://css-tricks.com/forums/topic/best-media-query-excluding-scroll-solution/

There were 2 proposed solutions:

html {
    overflow: hidden;
    height: 100%;
}

body {
    height: 100%;
    overflow-y: scroll;
    position: relative;
}

This answer is a little hacky as the article mentions as well and it leaves you with a permanent scrollbar even when all the content fits on the screen. Therefore, I'm not a big fan of it.

You could use a JS solution to sort this out as well. The article gives a git repo link that deals with the issue.

Lastly, which isn't mentioned in the article, you could add a couple more pixels to your media rule to accommodate the scrollbar if it doesn't have to be precisely accurate. If it does, then the JS solution is your best bet.

Genesa

Answer 7

Take a look at your units: rem, em, px.

I just had this issue and it was because my base font-size is 10px and I put max_width: 102.4rem in the media query, but it is activating at around 1600px instead of expected 1024px.

It still activates at 1600px on mine with 102.4em, but it works as expected when I use 1024px.

Here is an article that talks about everything I am hinting at:

https://zellwk.com/blog/media-query-units/

I missed the top voted answer at first because I experienced the problem using rem not px. Clearly, the root of the problem appears to be the units though.

Toxin

Answer 8

Adding my solution, as none of the answers solved my problem:

I had styled my scrollbar to have a width of 10px (thin in firefox), and the window's computed width was not accounting for the added width of the scrollbar, hence my breakpoints were occurring 10px thinner than the specified @media query.

To fix, I simply added 10px (the width of the scrollbar) to the query, turning:

@media (max-width: 600px)

into:

@media (max-width: 610px)

Happy coding!

Petuntse

Answer 9

I ended up on this thread after an hour of frustration, in the end I realised I'd accidentally used min-height instead of min-width:

@media screen and (min-height: $sm) { }

instead of...

@media screen and (min-width: $sm) { }

Just a reminder to quickly check it if you were having the same issue as me face palm, it's late.

Freak

Answer 10

The problem is that Chrome will always include the scrollbar (acting exactly as window.innerWidth, in contrary to document.body.clientWidth or jQuery's $(window).width()).

You just have to build your mediaqueries not pixel perfect, but always keep it consistent with window.innerWidth in javascript logic. Otherwise you're down to overflow hacks and you don't want to go down that rabbit hole.

Amphoteric

Answer 11

None of these fixed my issue, but my problem, after being dumbfouded why a breakpoint was occuring at 1000px, was because I was using the react-responsive library and I still had a breakpoint set in some JSX component!

Deloisedelong