How to get rid of the white space under the footer? HELP!

[hazelwyw (Hazel Wong)]

Hello guys. Does anyone know how to get rid of the white space under the footer? Thanks
Here is the read-only link:
https://preview.webflow.com/preview/hazels-radical-project-be2fe3?utm_medium=preview_link&utm_source=designer&utm_content=hazels-radical-project-be2fe3&preview=3afa5d734b6e0999b806d4fffef93d88&workflow=preview

[imtiazraqib]

Hey @hazelwyw, The whitespace shows up since the website is built as one section after another and there is not much content to push the footer automatically towards the bottom.

In situations like these, where you have a window-view worth of content, having an absolute position for your footer to the bottom of the page will help. Have your footer selected and set the position to absolute-bottom as shown below:

You can adjust the bottom margin to 2% to give it a little more white space or play around/leave it to your liking. Hope this helps!

[hazelwyw (Hazel Wong)]

Hi @imtiazraqib Thanks for your help.
Your suggestion does can move the footer to the bottom of the page but it the white space shifts to on top of the footer. Do you think these is some setting issue about the body?

[imtiazraqib]

Just out of curiosity, is this the design you are looking to achieve with your page?

[hazelwyw (Hazel Wong)]

Yes. Except the gradient background will be stopped above the scrolling banner so the footer is white.

[imtiazraqib]

Okay, that makes things a bit more clear. With the way you have the elements and symbols setup right now:

1. Have your footer as position: absolute bottom as I explained before and change the footer div background color to white

2. Similarly, have your wrapper set as position: absolute bottom with a bottom-margin of 6% as shown below:
   

3. Turn wrapper overflow to hidden as shown below so the page does not scroll sideways:
   

4. Change the height of your scroller section to 90vh (vh means view height, so it takes screen heights into consideration and fills 90% of it)

Doing the steps above will yield the following page design:

Hope this is what you are looking for!

[hazelwyw (Hazel Wong)]

Yeah this is so close to what I’m trying to chieve. Is there any way that to decrease the length of the gradient part? I want to get rid of some empty space below the project titles.

[imtiazraqib]

Increasing the font size so they take up most of the space would be a solution if you want the design to still take up the entire view of the screen. What you see is an entire canvas and if you want the entire canvas to be filled, you have to arrange content as such.

Stripping off the content will show the white body background that you wanted to get remove originally.

[hazelwyw (Hazel Wong)]

Ohh got it! Thanks for your help!

[Josh_Windatt]

I changed my footer “Overflow” to “Hidden” and it worked. Had this happen on two websites and really didn’t understand what caused the space.

[Noran_saber]

I encountered the same issue today, and when I saw your post, I solved it using JavaScript. It’s easier and more dynamic.

[DENNIS_GAKUHA]

It works extremely well