Lange - White Space At Bottom Of Page

Site URL: http://www.billydupee.co.uk

Hi there, I have almost finished my sites info page however there is a white bar at the bottom which i cant seem to remove. All other pages on my site are white, but the info page has specific code to change the background and footer to black. This is the code applied specifically to that page:

Quote

<style>
  main#page {
    background: black;
    margin: 0;
    max-width: 100%;
    max-height: 100%;
}
</style>
<style>
  footer#footer {
    background: black;
    margin: 0;
    max-width: 100%;
    }
footer#footer * {
    color: white !important;
}
  main#page {
    margin-bottom: 0;
}
</style>

It looks great apart from this white space at the bottom. On desktop it isn't very noticible but on mobile its very large. See below:

How can I remove this?

Thanks

See fine here. Did you solve?

No sorry it hasnt been resolved. See the screen grab from my mobile where it can be seen. Its only specifically on the Info page of my website as this is the only black page:

@tuanphan - Do you know what might be causing this and how to get rid of it? Much appreciated!

5 minutes ago, billydupee said:

@tuanphan - Do you know what might be causing this and how to get rid of it? Much appreciated!

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
body#collection-5e779245683f0c72e52567fc {
& {
    background: black;
}


.overflow-wrapper {
    background: black;
}
}
}

Hey Tuanphan thanks for coming back to me. Unfortunately that hasnt worked. It seems as though the content blocks on that page are coloured black but underneath them the actual page is white or grey. See the screen shot below where you can see the content blocks end and the grey and white is visible underneath:

@tuanphan Hi Tuanphan, do you have any other ideas as to what this might be?

I see fine here? Which device/browser do you use?

When I view the page on my mobile in Firefox it seems fine. Also when I view in Firefox on my Desktop iMac its fine. However when I view on my MacBook in Firefox i see this with the white bar at the bottom...

Any luck with this yet @billydupee and @tuanphan?

Here is how my website looks on mobile (iPhone XR).

First pic is portrait with extra whitespace at the very bottom of my home page.

Second one is landscape with whitespace on the bottom, left and right, again at the very bottom of my home page.

Though making the background black in those white areas may be a solution, ideally the whitespace in those areas will be completely removed. 

Otherwise, it will look as if the footer and the "margins" of the website are bigger than they actually are.