79

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?

8
  • 1
    Could it have to do with device pixel ratio?
    – aebabis
    Nov 2, 2014 at 5:10
  • 2
    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?
    – user663031
    Nov 2, 2014 at 5:22
  • 1
    Please provide the website URL
    – Hbirjand
    Nov 2, 2014 at 5:41
  • 1
    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.
    – Gil
    Nov 2, 2014 at 6:38
  • 15
    I think you have your browser zoomed in at 110% (1200 * 1.10 = 1320). Please try pressing Ctrl+0 to revert to 100%
    – ckuijjer
    Nov 2, 2014 at 9:05

11 Answers 11

240

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;
4
  • 7
    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%.
    – Jargs
    Jan 7, 2016 at 0:03
  • "you should considering defining your media queries using a relative units" No you don't Oct 11, 2018 at 9:58
  • 2
    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 Mar 14, 2019 at 9:52
  • 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. Jul 8, 2020 at 14:28
9

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.

2
  • 2
    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%.
    – shaunw
    Sep 18, 2018 at 0:08
  • kind of the same here in firefox, I had to get out of adaptative view and THEN perform the zoom reset
    – akabaka
    May 15, 2019 at 13:43
4

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; }
};
1
  • 1
    I felt so dumb after identifying my error :/. Thanks a lot btw. Feb 12, 2021 at 16:32
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.

3

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 :)

1
  • 3
    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.
    – Edward
    May 15, 2018 at 16:45
3

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.

2

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.

2

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!

1

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.

1

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.

0

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!

Not the answer you're looking for? Browse other questions tagged or ask your own question.