My parallax floating element causing horizontal scroll even with overflow=hidden. Help!

Hi guys,

I’m working on a website build. On the homepage, I have a circle image element that is meant to slightly overflow and be cut off from the side of the screen.

I have put it into a div container and set the overflow to hidden so the “cut off” part stay cutting off. (hope that made sense? )

It looks fine in the Designer Preview mode. But once I publish it, it still creates a horizontal scroll in the browser. Any clue how I can fix this, please?

My read-only link:
https://preview.webflow.com/preview/callaghan-rd-hub?utm_medium=preview_link&utm_source=designer&utm_content=callaghan-rd-hub&preview=bc34d18f0c939325af307b45c10e27a7&mode=preview

Here is the published version:
https://callaghan-rd-hub.webflow.io/

Thanks in advance ! :smiley:

Jeff

Hi Jeff,

Thats site looks tip top. Try setting overflow hidden on a parent object it is relative to. I’ve been nesting all page sections inside a content div and setting overflow hidden there meaning you don’t have to do it a a section level. It’s easy to copy the content of a whole page then too.

Hi HammerOZ,

Thanks for your compliment :smiley: and thanks for your reply. :slight_smile: yeah, I have tried the nested in a parent div and set overflow to hidden. Somehow it still breaks it. So wonder if anything I missed or any other fix I can try?

cheers,
Jeff

Edit: set body overflow to hidden first. If that doesn’t work, consider below steps.

I took another look at this. I have had this behaviour a fair bit. It’s odd that webflow previews it as intended.

I think the issue is that applying overflow:hidden to the body element is unreliable. If I apply overflow:hidden to the root html element, it works.

So try either:

  • Creating a content element and place all site elements in there. Set it to overflow hidden

  • add custom css to the site

<style> 
html {
overflow-x: hidden;
}
<style>

It’s a bit hard as I can’t make the changes ad publish in webflow, only to the code in dev tools.

Mention of this User Agent Css stuff and overflow is here :exploding_head:: Visual effects

1 Like

I changed that style to overflow-x as some vertical site scrolling is probably useful

Actually, overflow hidden on the Body element does work. So you don’t need to do all that. Just hide your body overflow as it is currently set to visible

Thanks a lot HammerOZ!! the overflow-x hidden works on Body element. When i did overflow hidden, it stops the site from scrolling when i published it. But overflow-x hidden works like a charm!!

Thank you so much,
Jeff