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.