Turning off Horizontal Scroll with Overflow Elements

Design help General
1

Hello!

I’m designing a site with several angled/diagonal elements that extend beyond the screen, on purpose. I am trying to hide horizontal scrolling so the edge of the elements remain hidden, but I’ve been struggling.

I’ve turned Body:overflow to “scroll” mode, but I only want it to scroll vertically.
I’ve tried to nest angled elements inside a container and set the container to overflow:hidden, but I can’t get it to work as intended.

I’ve also tried adding this custom code to the <header> (am I doing this wrong?) based on a very helpful suggestion, but that hasn’t worked either.

<style>
body {
overflow-x: hidden;
}
</style>

Any recommendations? Site link is below, I’m on a macbook pro using Chrome.

Thank you!

Here is my public share link: https://preview.webflow.com/preview/sardis-89e526-113209dd18b5419fe5c025dd2?preview=cce1a78bbdda32bb20c9ec92b62aae1a

2

Hey @zbaumel,

In our experience we have not needed to enter anything in the custom code section to achieve this. We had an issue with horizontal scroll that was solved by making sure out website BODY and SECTION elements were set to “overflow: hidden”. Hope this helps.

1 Like
3

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