Why media queries run at wrong width?

By Mateusz Szostek on 22 February 2021

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

Css, Web Development

Why media queries run at wrong width?

Web developer problem. The solution is simpler than it sounds.

Node.js

How to update all Node dependencies?

Are your dependecies out of date? There is a simple way to safetly update all.

C# .NET .NET Core

When should you use struct?

Struct and class. How the memory is allocated?

Top Topics

When should you use struct?Why media queries run at wrong width?How to update all Node dependencies?

Copyright © 2020 Mateusz Szostek, all rights reserved.