Streaming live at 10am (PST)

White space on mobile

Someone please give me a hand here, how do I remove the white space on mobile view while scrolling. Site is built with webflow, I have gone through style manager and removed all unused styles, used x-ray tool to see if any borders passed off of the canvas, still no luck, any tips would be hugely appreciated!


Here is my public share link: LINK
(how to access public share link)

Hi Cole,

You’ll need to share a public accessible preview link of your project so that one of us can have a look at what’s going wrong and help you out. In case you’re not sure how to find a preview link, check this link out.

Cheers,
Aditya

https://preview.webflow.com/preview/coles-groovy-project?utm_medium=preview_link&utm_source=dashboard&utm_content=coles-groovy-project&preview=d1b8af132ada41e8e85d9e7a544526a0&mode=preview

Sorry Cole, but there’s quite a few things you’ll need to fix in your site header and footer in order to get rid of the white overflow on the right! I’m also assuming your website isn’t fully responsive yet. I checked it out on a 15 inch laptop and the overflow on both, desktop and mobile versions is quite high.

“Nav Menu 2” in your header is going way out of the right border. Make sure you give the main parent element a width of 100vw, and ensure all of your content stays inside. Also set overflow to hidden. Nav Menu 2 shouldn’t be having that much of right margin. Instead of using margin, use relative positioning to move elements around within the viewport.

“Image 17” is also going out of the right border, and should be brought back in.

“Text Block 8” in footer should also be kept within the limits of the 100vw width of its parent.

In any case, setting overflow to hidden on the header and footer of your site, in this case, will stop the overflow. Once you do that, you’ll simply need to make sure all of your content remains inside the total width of whichever screen you’re working on.

Feel free to ask more questions!

Cheers,
Aditya

1 Like

Thank you so much aditya1, you’ve been a huge help, I believe mobile is perfe responsive right now! The only issue I have now is with desktop there is a large white space below my main banner as well as the footer, it does not show in preview but it does on the blushed site… if you could help me with this that would be incredible!

Great job fixing that header! It looks fine now.

The white space below the banner is because Slider, the main parent element of your first section banner has a height of 800px. Just change that to auto and that should do it. I couldn’t see anything wrong with the footer so I would need to see a picture, and I’d also need a published link to see what’s going wrong with it.

I recommend containing your sliders inside parent div blocks, where the parent div blocks can have a proper width and height and the slider can be contained properly within. Every section in fact should have a main parent div rather than be placed directly in the body in order to avoid white space and layout problems. Just a suggestion! Hope that helps.

Cheers,
Aditya

The white space is being displayed below the footer but only on a larger monitor it seems, I’ve tried adding a div block with no success.

https://www.destinedwebdesign.com/

Hey Cole, I think the culprits might be here: