-1

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?

jpch
  • 1
  • 1
  • 1
    Can you edit the post with some of your markup and css? It may help diagnose the issue. However, without seeing anything I would guess the meta tag mat be incomplete. This is the meta tag I would use: `` Good luck! – json Apr 25 '20 at 21:45
  • Does this answer your question? [html meta viewport tag](https://stackoverflow.com/questions/23662621/html-meta-viewport-tag) – Akansh Apr 26 '20 at 19:48

2 Answers2

0

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

Abdelmonaem Shahat
  • 532
  • 2
  • 6
0

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).

jpch
  • 1
  • 1