Disabling Touch Simulation in Firefox Renders HTML/CSS Differently

Question

I’m new to web-dev and don’t know if this is working as intended, but it seems odd to me. Briefly, disabling touch even simulation causes my webpage to be rendered differently (see attached photos). Is this due to my code, Firefox dev tools, or something else?

Thanks.

Code Here: Codepen

Answer 1

You need to add the following code to the head section (before title tag):

<meta name="viewport" content="width=device-width, initial-scale=1">

From HEAD

• meta name="viewport" - viewport settings related to mobile responsiveness
• width=device-width means that it will use the physical width of the device (instead of zooming out) which is good with mobile-friendly pages
• initial-scale=1 is the initial zoom, 1 means no zoom

For more info about viewport meta tag see: Viewport meta tag