12

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.

James Anderson Jr.
  • 760
  • 1
  • 8
  • 26

5 Answers5

17

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.

Masoud
  • 414
  • 4
  • 11
4

What's going on here:

  • You've set width=device-width, this makes the layout size on your page equal to the device's screen width. i.e. making an element 100% will give it the same width as the screen.
  • Chrome infers the layout height using the width and screen's aspect ratio. i.e. height=width/aspectRatio
  • The sub_container_div element actually ends up being much wider than the layout width of the page. In my case on a Nexus 6, the device-width is 412px while the sub_container_div is 594px wide.
  • Since the content is wider than device-width, Chrome allows zooming out and loads the page at the minimum zoom level but this doesn't change the layout width/height so height 100% only fills device-width/aspect ratio pixels, which doesn't fill the zoomed out viewport.

The correct way to fix this is to make sure all your content is contained by the layout size. In your case, the reason the sub_container_div is wider than the layout size is that your padding/margins cause it to expand outside the parent. The solution is to add box-sizing: border-box to the sub_container_div and dialog elements and width: 100% to sub_container_div. That way, Chrome can't zoom out and you can't see outside the layout box (in HTML spec language, that's the initial containing block).

David Bokan
  • 2,199
  • 15
  • 13
  • Just tried it that way, adding `max-width:37em;` to keep the desired, consistent, horizontal rectangle shape on desktop. On mobile, though, it looks kind of odd though, because the letters are pretty big, and the standard rectangular message box shape is transformed into an elongated one. – James Anderson Jr. Aug 22 '16 at 16:24
  • The initial-scale did eventually help ( `initial-scale:0.7` was perfect!).This question has been officially solved (for the sake of the "Perfect Error Docs" script. And I will immediately update that script with the newly responsive, and mobile-friendly code. Though, It may not work the same for everyone), by a combination of answers provided. But yours was the most descriptive, and comprehensive, so if you would just add the extra code I used, to make it all work, I will gladly mark your answer as the chosen, and correct one! Thanks David! – James Anderson Jr. Aug 22 '16 at 17:20
  • Actually, spoke too fast. Now it looks too small on tablets! :-( I'm testing with Samsung Galaxy Tab S. – James Anderson Jr. Aug 22 '16 at 18:54
  • If `initial-scale:0.7` is still making a difference, you've still got content that's wider than the initial containing block and you're masking the problem by zooming out. You should make sure all your elements are contained by the `` element in DevTools by hovering over body and seeing if anything is outside its box. Depending on the effect you want to achieve, it may be worth using media queries to change font/dialog size based on screen size. – David Bokan Aug 22 '16 at 21:28
  • 1
    Basically, what I'm trying to say is that by allowing zooming out, the browser enters a mode meant for legacy desktop pages and has poor interop between browsers and quirky features. Try adding `minimum-scale=1` to the viewport meta tag and work from there to get the page looking correct. – David Bokan Aug 22 '16 at 21:32
3

I had the same issue on Chrome 77

I fixed the problem by removing height: 100vh on the body tag.

neox5
  • 1,621
  • 13
  • 16
1

This seems to fix the problem:

  1. Change <meta name="viewport" content="width=device-width"> to <meta name="viewport" content="width=device-width,initial-scale=1.0">.
  2. Override width: 25em; on .sub_container_div in your mobile CSS so that the container scales with the width of the view.

If you do not want the font to scale, it seems just adding initial-scale=0 will work as well. However, this will make the text very hard to read. You can play around with different scales, but it seems just setting it will fix your issue.

Karin
  • 8,404
  • 25
  • 34
  • Unfortunately that will not work because the `.sub_container_div` cannot be changed. That part of the code has already been perfected in order to keep the dialog box perfectly centered in the middle of the page (despite window width) on Desktops. I was looking for a solution that would only modify the "mobile" view of the page because everything else is nearly perfect. – James Anderson Jr. Aug 22 '16 at 00:55
  • Hm, it depends what you want then. If you want the view to be mobile friendly, you can certainly make a media query for small screens that overrides the desktop width without affecting how it looks on desktops. If you just want the desktop view (with tiny, not-mobile-friendly font), you can set the `initial-scale` to `0` to get the desktop view on the phone. – Karin Aug 22 '16 at 00:59
  • You can do it without media-query and still have it work on desktop: `.sub_container_div{ width:auto; max-width:25em }` In any case `initial-scale=1.0` is the way to go. Enjoy! – Miro Aug 22 '16 at 01:03
  • Did I miss something? I though we were talking about height here. The width is working perfectly fine. It fills out the page fine, on both desktop, and mobile. – James Anderson Jr. Aug 22 '16 at 01:07
  • The width won't work once you change your initial-scale to 1... That's what you missed ;) – Miro Aug 22 '16 at 01:08
  • @karin I already made a mobile version that works as expected here: [ http://m.seniorchoicesunl.com/error_documents/error401.php ] I'm trying to update (optimize) this [ http://www.perfecterrordocs.com/ ] script for the benefit of my own sites and everyone elses. If you're confident your way would look better maybe you could fork it on GitHub, or make a pull request. – James Anderson Jr. Aug 22 '16 at 01:16
1

In my case one element was too long for a mobile screen and it broke the webflow. After I shortened the width of the long element, the extra white screen was also removed from the footer.

Abdulkadir Uyanik
  • 87
  • 1
  • 1
  • 7