Once upon a time, while creating one of the websites, I encountered an irritating problem. When trying to create a responsive container, I noticed that media queries turn on with different width and height values than I specified. The solution turned out to be very simple.
If you've run into a similar problem, don't worry! Probably each of us has encountered this obstacle. The most common reason for this is a zoom in a web browser other than 100%. If you have zooming in or out on, most likely your media query is behaving in a strange way. The solution is simply to set the zoom to 100%.
To prevent this from happening in the future, you might consider defining media query in relative units like 'em' or 'rem' rather than px.
Written by Mateusz Szostek
