White Space at the bottom of the page

Site URL: https://www.aspiringdatascientist.net/community

Hello,

I have been trying to remove the white space at the bottom of my page but i cant seem to find a workaround (I have tried the suggestions from similar posts in the blog but they dont seem to work).

The white space is not present in mobile nor in my laptop screen but when I use bigger screens it creeps in at the bottom of the page.

Is there any way I can fix it? I have also tried adjusting Spacing (Site Styles --> Site Margin) but none of the values fix it. 

I am in version 7.1.

My site is https://www.aspiringdatascientist.net/community and the code is 1989.

Thanks in advance.

Best,

Alex

21 hours ago, alex_vamvakaris said:

I have been trying to remove the white space at the bottom of my page

It is "empty" space rather than "white" space and is because the page isn't very long. 🙂

Adding content to the end of the page such as a Spacer Block would make the page longer and avoid the empty area.

However, if you want the length of the page to be fixed, you can only do this with some Custom CSS that fixes the height of the page, usually to 100% of the vertical height:

height: 100vh!important;   or  min-height: 100vh!important;

Was this post helpful? Please give feedback by clicking an icon below  ⬇️

Hi Paul,

Thank you for your reply.

That did fix the issue for the higher resolution screens but my laptop screen (lower resolution) now does this wierd thing as you can see in the video below.

Any way I can make it full screen - so no option to scroll up and down - for all or most screen resolutions or I am being too optimistic? 🙂

Also this fix has broken the mobile version of the page

Hi, I'm having the same problem with my page- white space at the bottom. Squarespace customer support says this is because I don't have that much stuff on the page. I'd like to use the CSS fix Paul mentioned, but I'm unfamiliar for the most part with that process and I'm looking for some help. When I go into "Design" and then "Custom CSS," do I then just copy/paste "min-height: 100vh!important" onto the next line? Thanks!