I’ve got some relative placed images inside color block divs, so they float like bars over the corners of those divs, pure decorative. They overflow the section limit vertically and also the body horizontally.
When hiding overflow on sections, it cuts these bars (svg shapes) horizontally, but if I don’t hide the overflow it scrolls horizontally on mobile and tablet devices and it looks awful.
Plus, these bars are cut off intentionally on the sides of the screen. As if you put tape diagonally on the corners of a piece of paper, that was the idea, but when overflow isn’t hidden, it just scrolls horizontally and it is a nightmare.
I’ve set the body’s overflow to hidden but it won’t let me scroll on the screen at all, it only displays the first section of the page.
I’m looking for a no code solution, I’ve tried making smaller images so they don’t touch the margin of the page but placing them is a mess between breakpoints and that destroys the original design idea. Also no z index configuration worked at all.
I’ve seen this “overflow-x hidden” thing but I don’t know how to add custom code in here and how can this be linked to the body. But it’s not like I want to hide the horizontall scroll only, I want it to NOT scroll horizontally but still have overflow elements hidden on body but not between sections. Idk if I explained well enough.
Any help would be highly appreciated.
Here’s the read only:
Thanks a lot in advance!
PS: background images are not finished