I am having a big problem with my pages scrolling horizontally as it seems like elements are out of the boundaries. I am trying to implement these big elements that span cross sections, and I don’t know if I am doing it right since it seems like they are overflowing. I also can’t turn overflow off because it will cut off the elements, and thus the desired effect is not achieved. Should I place the elements (squares and circles) outside of the sections on the body element? I tried setting overflow off on the All-bodies tag, but then the site was not scrollable at all anymore.
Somehow the overflow only shows on the staging site which can also be found below.
Create a new div (I’ve named mine overflow), set it to 100% width and height, set it to overflow none, then drag the rest of the layers in your site inside of that.
The overflow will then act as a container for the rest of your content and will eliminate the scroll bars.
Thank you so much for your answer! I tried that just now and it still does not work. I attached a screenshot with the updated staging site and it still scrolls unfortunately. Any thoughts on why this is still happening? I thought that the div would have fixed it since it makes sense.
That’s weird, I’m not quite sure why the preview is showing something different than the published site. What happens if you set the overflow container to 100VW instead of 100%?
@bryanmanio yeah, super weird! When I set it to 100vw it still does the same. I also tried setting overflow to hidden on the section and on the element and it still does not change. I placed the item as absolute and -1 as z-index, but changing the z-index didn’t help either. The bright green element is placed under “Hero Section Services” If you want to look at its properties.
