Im having trouble in mobile layout. Several elements go beyond the viewport rather than stacking + scaling down responsively. This is forcing an unwanted horizontal/x-axis scroll.
Can someone please help me to identify what is causing this problem?
Need your share link to investigate but I can tell you how to problem-solve these types of issues.
From the navigator, start deleting the bottom section on the page. Test to see if this eliminates the movement. If not, delete the next section and retest. Continue until the movement stops.
Once you’ve narrowed down which section is causing the issue, hit undo (command z) to put everything you’ve deleted back in place. Return to the problem section and expand its contents in the navigator. Similar to step one, you will start deleting elements and testing for movement. Once found, hit command z to return all elements back in place.
Continue these “narrowing” steps until you discover an element with some funky setting: wide minimum width, improper margin setting, relative/absolute position shift, etc.
This is the correct share link, which was missing from your original post.
Since you’re new to Webflow, you’ll want to study Webflow University to get a full understanding of how to control the responsive layouts. There are a wide range of issues that need to be worked through to get this page working properly on mobile. I’ve attached a screen grab showing one (of many) instances of settings that need to be adjusted for the smaller viewports.