Mysterious White Space at bottom of Web Page in Mobile-Chrome

html css viewport mobile-chrome
James Anderson Jr. picture James Anderson Jr. · Aug 22, 2016 · Viewed 10.3k times · Source

I've looked at many "mysterious white-space at bottom of page" issues here on SO, and played with the viewporttag many times, but I still cannot figure out what I'm doing wrong!

The page in question is: http://www.seniorchoicesunl.com/error_documents/error401.php

Here's what it looks like on mobile from Chrome Dev Tools:enter image description here

Any Ideas on what I'm doing wrong?

Edit:

setting ANY initial-scale is bad news! It makes the font too tiny! Take a look: enter image description here

The desired mobile look, while keeping the desktop and tablets as-is, is this:

enter image description here

P.S. Fixing this issue could reciprocally fix other related issues I'm having with other webpages.

Answer

Masoud picture Masoud · Apr 28, 2017

Add this on top of your css file :)

html,body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
}

it fixed the bug for me.

Related questions

Disable Pinch Zoom on Mobile Web

I want to disable Pinch and Zoom on Mobile devices. What configuration should I add to the viewport ? Link : http://play.mink7.com/n/dawn/

Read More
percentage width in css not working

I was using a way to define my width property in css with the viewport measurement, css code: #content { position: absolute; background-color: white; width: 100vw; top: 115px; bottom: 30px; display: table; z-index: 0; } When I changed the width from width: 100vw; …

Read More
Difference between visual viewport and layout viewport?

What is the Difference between visual viewport and layout viewport for a mobile device like iPhone/iPad? I have gone through a lot of online resources, but am still unclear about it.

Read More