Media Queries firing at wrong width

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?

Solution 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;

Solution 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.

Solution 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; }
};

Solution 4:

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