We expect our media query to start working at 800px, so we used 50em for the media query (800/16). Maybe we used a tool that automated the conversion from pixels to ems in our media queries.
We are also sizing blocks using the
rem unit, but at some point in the project’s life cycle we used pixels for some of the blocks.
If the user’s base font size remains at the conventional 16px, we are alright. If it’s different, our blocks sized with rem will match the media query, and the ones sized with pixels won’t.
In browser settings, change the base font-size to 24px. As a result: