Search code examples
htmlcssmargin

Smartphone lateral margins much bigger than PC's

In my website I have:

.div1 {
    display:flex;
    flex-direction:column;
    align-items:center;
}
h1 {
    font-weight:normal;
    font-size:50px;
    font-family:Sans-Serif;
    margin:0.5em;
    color:#ccc;
}

.div1 is a div element that contains all other elements on the page. First thing inside it is a title like that:

<h1>B I O D I V E R S U S</h1>

In my computer, when I resize the browser to become very narrow (simulating a smartphone screen), only a few letters move to the next line. The lateral margins are as small as the bottom and top margins (0.5 em).

PC screenshot

In my smartphone, however, the lateral margins are much bigger than the bottom and top margins, so that there's plenty of room for all the letters, and still some of them go to the second line (the same problem in the paragraphs below).

Smartphone screenshot

What's going on?

Solution

  • To get webpages to work properly on mobile devices, you need the following meta tag.

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

    In short, if a mobile screen has a width of 640px, pages might be rendered with a virtual viewport of 980px, and then it will be shrunk down to fit into the 640px space.

    To understand why this is, you can read up on it here, and here.