White space below footer

On the homepage of my website I created a top banner that is fixed so that the content scrolls below it. For some reason there is whitespace below my footer. I would like to remove the whitespace below the footer but don’t know how to! Can somebody have a look for me?

http://blue-office-battery.webflow.io/

Thanks!
Daniel

1 Like

Can you please share your public share link. Thanks! :wink::blush:

https://preview.webflow.com/preview/blue-office-battery?preview=f057c7c6c517f0ff59309a20b492184c

Hi @Daniel_Tiebor, could you please share a screenshot of the whitespace you are referring to? Is it on the home page?

When I look at your site, I don’t see the white space.

Try rebooting? Logging out and logging in again?

(Sorry I couldn’t be more helpful! :grinning:)

@tkister Thanks :slight_smile: I only get the issue on the homepage of the website…http://blue-office-battery.webflow.io/

Interesting… I do see about half an inch of white space when I follow the link (http://blue-office-battery.webflow.io/), but I still can’t see it when viewing the pubic share link.

I tend to avoid using columns the way you have, because Webflow includes some automatic settings for columns, which you can see in X-Ray Mode (note the red areas in the screenshot), but not in the Styles panel.

Instead, I would use two divs and float the first one left and the second one right.

I would also try removing the bottom border from the Footer section (since you won’t really be able to see it anyway without the bottom white space).

Then I would try adding classes to all of the footer elements so you can specify the margins and padding.

@tkister Thanks for your help. I did like you suggested but there remains white space below the footer. I think it’s because of the movie that’s playing on the top of the page. I also add a pagewrapper div and but all the other sections in it making the footer stick to the bottom but it doesn’t work?! Do you have another idea what’s going wrong here? Thanks for your help! It seems to be a Google Chrome issue…Tested it in Firefox and Safari and there it’s fine!

Could it be the bottom: -100%; on your video-tag that causes the trouble?

Edit: Sorry, please ignore. Seems to be from Webflow’s own css.

1 Like

Hi @Daniel_Tiebor, I made a quick video with some suggestions, sorry, I did not notice you had the design earlier with sections already under the body.

Anyway, I hope this video helps in some way:

Thank you so much @cyberdave. Your video really helped me out! Followed your advise and now things look good :slight_smile: Thanks again!

1 Like

@cyberdave. I noticed that the video won’t play on an ipad (1). Is this due too the old device or might there be another problem with the video? The file is a mp4 format and should be supported. Do you have any ideas what might go wrong?

Thx!
Daniel

Hi @Daniel_Tiebor, on iOS and mobile devices, the video does not autoplay. I would recommend to create a background image div in the design, and show that on tablet and lower and only show the video on desktop.

Another option is to create an animated gif and use that (but be careful of files size with animated gif).

Check out this topic: Background video hero in iOS - General - Forum | Webflow

Let me know if that helps :slightly_smiling:

1 Like

Thanks @cyberdave. Changed it so that the video is only visible on desk/laptop.

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.