Responsive website breaks apart when side scrolled

Hi Webflow community,

My name is Earth. I am working on a responsive website with interactions that overflows out from both left and right side of the viewport. I’ve gotten everything to work properly now but the only thing left is that the website breaks off into sections when scrolled and I do not know how to fix the problem.

I tried to hide the overflow in the body tag/class and it worked on my desktop view when published. However, when my friend accessed the site with Chrome or Safari on their desktop they were unable to scroll down.

The site will run fine on an iPad in Safari, as well as not side scroll. However, when I viewed it on my iPhone the site was able to scroll down but when pushed to the side it begins to break.

On instances when I scroll down to the bottom and the page does not break, when I tap on the email form and it autofocuses, the page shrinks and stays that way.

From my understanding, when overflow is set to hidden it clips anything content inside the hidden element. Since the body’s height is set by the content inside and the width is already locked, everything should be contained as one solid block when scrolled right? I am not sure if this is the correct method for what I am striving for. If there is a best practice for this please do let me know!

I’ve indicated the project URL below.
The password is biscuit123

Thanks a lot!
Hope to hear back from you guys soon.

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hey Earth! Right away I noticed you have overflow: hidden on the body tag. If you remove that your scrolling down issue should be fixed. You should have a dive Inside the Body tag called, “Site Wrapper” for example, and set that to overflow: hidden and put everything you need inside of that. Making the the overflow hidden on the body tag will prevent scrolling.

Hi PHRyan,

Thanks a lot for your help! It worked, that simple huh.