HTML body not filling complete width on mobile devices

Question

If I open my (GWT) page in a normal browser, everything works fine. The body takes the whole width and the content is nicely centered. But if I try this on a mobile phone, the body does not take the whole width and therefore the content is not centered.

I couldn't find out why it is being displayed like this. Also, adding 100% width to body and html tag does not solve the issue .

Is there a way to get this working nicely on a mobile device?

The page can be reached under: http://www.vegantastic.de/

Answer 1

this was driving me crazy and i just solved it by adding position:fixed to the body

Answer 2

Why is body not full width, even though its set to 100% / vw?

In a strange way it is full width, but the viewport is scaled down automatically by the browser, so it fits in the overflowing content.

To check, if this is the case, type this in the console (1): window.visualViewport.scale

1) edit Sep. 2019: visualViewport: only available on Chrome - sry for late notice

If it returns something like 0.8, then the body size is correct, but the viewport is scaled down.

You can also double tap to toggle between scale 1 and "fit-content-scale" (needs touch simulation like in chrome dev-tools).

How to not overflow body?

• See here https://stackoverflow.com/a/14271049/3313410 "Creating a site wrapper div inside the body"
• or check, if a certain element has a min-width, that "overrides" its width
• or check, if something is rotated, or margins out https://stackoverflow.com/a/45534745/3313410

Answer 3

It might be because of a very long word on your webpage. After using the correct viewport meta tag:

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

I tried this out, by placing this text inside a paragraph element, inside some empty HTML document:

<p>Here I have a text, and I am going to use a very long, and not-imaginary word (oh it's real) inside. Without some word-breaking CSS, the result will break the screen on smaller devices: Pseudopseudohypoparathyroidism</p>

What happened when I decreased the screen size without the mobile phone simulator:

And what happened when I decreased the screen size with the mobile phone simulator:

Quite the difference. My tip: use the following CSS attribute:

p {
    word-break: break-word;
}

Answer 4

I can see that the problem behind this question was solved, but I just experienced the same issue and the answer here could not applied in my case because of the scroll disabling stated in the comment, and any other style modifications on the body seemed to affect the result.

After experimentation I found out this was caused by an element inside my page which was rotated and its height became an obstacle on mobile, since it was closer the right end of the body.

So I would like to add this answer if someone, like myself, find this question via google:

This problem can be caused by many factors, you may want to investigate if one of your component's width is not becoming a problem on mobile view. There is probably a div too long on your page, or a rotated one which margin got out of the body.

Answer 5

Just add this to your body tag and your problem should be solved:

body {
  position: absolute;
 }

Answer 6

In my case, body (and html) element returns to normal after removing the properties from display: flex; group. After my investigation, I discovered that every element with an automatically calculated width must be in an element that has height and width and wraps all children going all the way to the body. After adding some overflow:auto; position:relative; to the parent elements, the body scales correctly with display flex nested in display flex.

@import '../../variables.scss';
:host {
  overflow: auto; // added this line
}

.top-bar {
    display: flex;
    flex-direction: row;
    padding: 10px;
    box-shadow: $shadow;
    position: relative;
    .search-item {
        flex: 1;
        margin: 0 1em;
        display: flex;
        flex-direction: row;
        position: relative;
        input {
            margin: 0;
            border-top-right-radius: 0px;
            border-bottom-right-radius: 0px;
            border-right-width: 0px;
            flex: 1;
            width: 1px;
        }
        button {
            margin: 0;
            border-top-left-radius: 0px;
            border-bottom-left-radius: 0px;
            border: 1px solid #ccc;
            border-left-width: 0px;
            box-shadow: inset $shadow;
        }
    }
    button.icon-only {
        border: none;
        background-color: transparent;
    }
}

menu looks like this:

before:

after:

Answer 7

I had the same problem. In my case there was a grid element that had many columns and grid-gap set to 50px. It caused html to expand. I think it's a good practice to reduce grid-column-gap on small screens.