Jump to content

Lange - White Space At Bottom Of Page

Recommended Posts

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:

1695533523_Screenshot2020-08-06at12_41_15.thumb.png.e8310f3673de6bc36efb8c825bb4a047.png

How can I remove this?

Thanks

Link to comment
  • Replies 10
  • Views 3.5k
  • Created
  • Last Reply

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:

IMG_D124E307ECE2-1.thumb.jpeg.ea2245872514ec1c06570933b7b7e001.jpeg

Link to comment
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;
}
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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:

327342279_Screenshot2020-08-07at15_48_33.thumb.png.3a50b49be14c36b28953c13afb0cf195.png

Link to comment

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...

Screenshot 2020-08-11 at 15.14.42.png

Link to comment
  • 4 months later...

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.

image0.png

thumbnail_image1.png

Link to comment

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.

Link to comment

Archived

This topic is now archived and is closed to further replies.


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.