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

Community resources General
1

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

2

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:

Screen Shot 2021-07-14 at 2.53.54 PM

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!

3

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?

Screen Shot 2021-07-14 at 3.06.25 PM
Screen Shot 2021-07-14 at 3.06.25 PM1302Ă—1117 102 KB

1 Like
4

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

Screen Shot 2021-07-14 at 4.15.50 PM
Screen Shot 2021-07-14 at 4.15.50 PM2874Ă—2180 436 KB

5

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

6

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:
    Screen Shot 2021-07-14 at 4.40.31 PM

  3. Turn wrapper overflow to hidden as shown below so the page does not scroll sideways:
    Screen Shot 2021-07-14 at 4.46.48 PM

  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:

Screen Shot 2021-07-14 at 4.45.19 PM
Screen Shot 2021-07-14 at 4.45.19 PM3002Ă—2254 442 KB

Hope this is what you are looking for!

7

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.

8

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.

9

Ohh got it! Thanks for your help!

10

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.