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-p         


        

Answer 1

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.

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.

Answer 3

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.

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

Answer 5

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;

Answer 6

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