White space under footer - on certain pages / browsers / computers

Design help General
1

Hello webflow geniuses !!!

So I have been reading loads of post regarding similar uses and have tried some custom codes but I cannot get rude of the white space under the footer on certain pages…

I know that there is not much content on my pages but:

1- how comes I am still able to scroll down?
2- how can I still force the footer?

Can anyone help? This is the last bit I need to do before launching this website!!!

https://preview.webflow.com/preview/juno-test-2?preview=d0f2175f9e2ef7cd446089bfbcfd5d52

Thank you all so much @webflow

2

Hey @Romain_Renoux,

Do this on your Footer
(Height 130px, Absolute positioning bottom)

32
32234×706 18.4 KB

It should do the trick.
Hope this helps,

3

HI @zbrah ,

I tried it before but when I do this the footer stays in the middle of the page :confused:

Not sure why.

4

@Romain_Renoux, oh yes thats because it’s a symbol so it stays in the middle when the content is long enough.

So i guess you should go back to relative for your footer (sorry)

55
55233×670 18.2 KB

And you should play with vh on the sections height of the concerned pages.
I don’t see any fix that would work for every pages sorry :frowning:

OR MAYBE

You create 2 symbols, one with relative and one with absolute (Btw you may need an extra padding-bottom : 130px on your body if you use absolute

5

Hello!

Thank you so much for reaching out about the white space under your footer. I imagine that is not what you were expecting, but I’m happy to help!

Yeah, this can be a tricky layout fix when the content is sparse, but you can definitely take advantage of flexbox in this case.

The following steps were completed after I removed the custom code and removed the relative positioning on the footer element.

Next, I placed the page contents within a wrapper, added flexbox to the wrapper, and changed the settings of the wrapper to Vertical and Justify: Space Between:
69ef901a00f5073c13d037b8ea5518f3.png

These settings will push the footer to the bottom of the page when space is available.

I was able to clone your site, and you can view the difference at the following URLs:
Your site: http://juno-test-2.webflow.io/join-juno
My test: http://juno-test-2-webflow.webflow.io/join-juno

Also, you can view how implemented the wrapper by viewing the read-only link.

Please note that flexbox isn’t supported by IE 10 and older, and only partial support by IE 11: https://caniuse.com/#search=flexbox

Feel free to let me know if this is helpful, or if you have any additional questions.

I’m happy to help further!

6

Thank you a million! It worked perfectly and was SO EASY to do :wink:

I have another question but it concerns the website nav bar… so I will post it on another post.

Again MERCI @webflow you are awesome!

1 Like
7

Awesomeness!

Glad I could help!

I’ll be looking out for your next question :slight_smile:

8

Hi there,

I happens that my clients’ clients mostly use IE :confused:

Is there another solution for the footer to be fixed down the page on any desktop / laptop and browsers?

This is really urgent as the website is now live!

Thank you so much in advance @webflow !

Romain

1 Like
9

HI @Romain_Renoux,

Great question, and thank you for reaching out about IE browsers and pushing the footer to the bottom of the page.

I would suggest taking advantage of what @zbrah suggested as his solution will be compatible.

You can also look more into that solution at the following Medium article that talks about keeping the footer at the bottom

Hopefully this was helpful :blush:

1 Like