Using overflow hidden to constrain DIV visibility

Hi there.

Trying to use an overflow:hidden on a div container to make the content go beyond the browser width of 1440px.

When i set the DIV to 2000px w with overflow hidden i still get a scroll issue. Can someone advise me on what Im doing wrong.

Here is my read-only site. and an image to show what im trying to achieve.

https://preview.webflow.com/preview/everythere?utm_medium=preview_link&utm_source=designer&utm_content=everythere&preview=91c7a3f830c363166a782601a197cb7b&pageId=5d2e73332663b91c70ab1a10&mode=preview

02%20PM

Thanks in advance

Hello @Jeremy_Stewart,

Wellcome to the Forum. What you need to do is to go you your body and select overflow:hidden there, that will solve your scroll to the sides issue. I hope this is what you are looking for. Take care.

That was simple. Thanks for the tip!

1 Like

No problem @Jeremy_Stewart, I’m glad that helped you. You can mark the question as solved so other people with the same question can benefit from this conversation. Take care.

I noticed that in Webflow preview it worked, but when I publish the site it makes the body not be able to scroll. Any suggestions?

Hello @Jeremy_Stewart,

yes i see how that could happened. Try putting the body back to display: visible and then put all your content inside a div block and set that div block to display:hidden like this:
00%20AM
Let me know if that works once you publish it.

That seem to work, in safari and Chrome. Thanks. Although it did create a new problem where that gifsection section is not centered.

:thinking:

Thanks for your help.

Hello @Jeremy_Stewart,

Sorry, I hate when that happens. I tried both browsers and I got the same problem, all fine in chrome, and not perfect on safari. Now i heard that problems like this one are due the the latest versions of the browsers but i think i have the latest version of safari and it didn’t work me. It could also be because webflow is now using the latest version of jQuery and that generates this type of problems. So, try to add this script on your page settings on the inside head section: <script src="https://code.jquery.com/jquery-2.2.0.min.js" integrity="sha256-ihAoc6M/JPfrIiIeayPE9xjin4UWjsx2mjW/rtmxLM4=" crossorigin="anonymous"></script>
Let me know if that works.

That seem to work, in safari and Chrome. Thanks. Although it did create a new problem where that gifsection section is not centered. :thinking: Thanks for your help.

Im glad it worked out. I tested both and it seems that the only issue is that now autoplay for the videos doesn’t work on chrome and it does work on safari!! Anyway, I think the new version of safari should come with the new jQuery, so when they update, get ride of the script. Take care.