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.