How do I remove white space at the bottom of my web page that only appears on mobile?

Question

When viewing my website www.zakjack.com on a mobile browser, there is a block of white space below the last line of content. This white space does not show up on web browsers.

I've tried a bunch of different fixes including going through my CSS line by line to find a margin or padding error, but I could not find anything.

The closest I've come to a solution is overflow: hidden; which is almost perfect, but this creates a new problem where rotating the mobile device & some browser sizes will cut content off. Is there some way I can get around this?

For reference, these are the other solutions I've tried for the white space problem:

A CSS reset

Setting html body height to 100%

Adding '''background-size: cover;''' and a min-height of 100%

Answer 1

Managed to find a solution for this:

@media only screen and (max-width: 480px) {
  body {
    overflow: hidden;
  }

Disables the scroll function when a phone is in portrait mode, but allows scrolling when turned to landscape and on tablet & desktop.