Wrong container size in mobile

Question

I have problems using the meta tag width="device-width" because the page loads zoomed in on mobiles.

After checking with the inspector I realized the site container has the "wrong" size on mobiles: even though in the CSS the width is set to 100% (I've also tried "width:auto;") the container is clearly just about 30% wide.

What could be the reason for this problem? Could it be just a missing or some sort of syntax error in the code? Or an issue when loading js modules?

Answer 1

first, make sure you added this line in the head

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

second could you please share the container class code to figure out what is the main problem

Answer 2

Hi thanks for the quick replies.

I had a min-width in relative (rem) units which caused the problem. I was confused as to the "relative" of rem units, and did not realize that they are only relative to a fixed quantity (the room em size).