Streaming live at 10am (PST)

Massive white gap at bottom


#1

Hey Guys,

I've decided to try out WebFlow for a project but am experiencing some big issues.
I set the height of my section to 100%

However when I test the site out on mobile phones and computers that are a different resolution to my own, there is a huge white space at the bottom!

Please advise!
Many thanks in advance.
Here is my troubleshooting link: https://webflow.com/design/informationpacknet?preview=5240cdcf12acd5a6eaf2a7c6cc41ca7c


#2

Your infoline has a massive top margin which is creating that white space.


#3

@Jonas76 ok but then how do I have the infoline towards the bottom without that massive top margin?

Thanks


#4

Hey @sparkzweb what I would do is set that image as a background on the BODY, instead of the section. You can even set it to cover and fixed and whenever you scroll you will have your background there. Setting height to 100% sometimes expands it to the height of the browser window, not always the full height of the website. CSS is weird with 100% heights.


#5

thanks for your response @thesergie
how do I set that to the background in webflow?
I can't see how I select the body, I'm only able to select the section


#6

There are two ways to do this:

Through the navigator:

Through the selected element UI:

Then to add a background:


#7

thanks for your reply @thesergie

that still didn't work though.

it looks ok on my huge resolution 27" iMac but when I go to other computers or resize the browser window it messes up - not the point of responsive design!!

please see the attached screenshot
It shows an example in chrome where the white box is still appearing, even though I made the background apply to the body not the section and also set it to cover and no-repeat.

please advise.

Also the text "how you get paid" is too close to the above line, how do I make it so that when the browser window is small, it doesn't cram up like that.

Many Thanks


#8

Set your background to "Fixed" as well so it stays fixed in your browser viewport. Also, to give the text some spacing, change the line-height:


#9