Scrolling width issue with slanted div blocks

As part of my design, I have slanted the div blocks. In order to make sure that the slanted block goes right to the end once they’re rotated I’ve given each one a -10px margin. However, this margin is making them go off the page which leads to horizontal scrolling which I don’t want.

I have tried putting each div block into a section and setting the max width to 100% and the overflow to none. However, when I do this, you can no longer see the div block.

I have also tried setting the max width of the section to 100%, with overflow still visible. However, this still leads to horizontal scrolling.

Is there a way to allow overflow on the verticle but not on the horizontal? I think this would solve my problem. Or is there a way of setting the max width of the whole site to 100%

Any help with this would be much appreciated. Thanks a lot!


Here is my public share link: https://preview.webflow.com/preview/easy-tweety?preview=7782abde7350581f6212af6a22edeb8f

Is anyone able to help with this? I’d really appreciate a response :slightly_smiling_face:

Try max-width:100vw;

I’ve tried setting a max width of 100vw on every section but it doesn’t make any noticeable difference.

Any other ideas?

I still haven’t found a solution to this one… does anyone else have any ideas?

Hi @jamie1!
To prevent horizontal scrolling, add this to your custom code (inside head tag):

body {
overflow-x: hidden;
}

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