Webflow site scrolls sideways on mobile
Sideways scrolling on a Webflow site means one element is wider than the screen. The usual suspects are interactions that start elements off-screen, fixed pixel widths or 100vw widths inside padded containers, negative margins, and wide embeds or logo marquees. Find the element by previewing each breakpoint, then set Overflow to Hidden on its parent section, or replace the fixed width with a percentage or max-width.
What you'll see
On a phone the page can be dragged left and right, revealing a strip of white space down the right side. Text may look slightly off-centre, and pinch-zoom behaves oddly. Desktop looks perfect.
Why it happens
1. Slide-in interactions start off-screen
An element animated in from the right sits outside the viewport before the animation runs. Without a parent that clips it, the browser extends the page to include it, which Webflow’s own help notes is most noticeable on mobile.
2. Widths that do not fit small screens
A fixed width in pixels, a 100vw element inside a container with padding, or negative left and right margins all push past the edge of a phone screen.
3. Wide embeds, sliders and marquees
Map and video embeds with fixed widths, slider tracks and scrolling logo strips are common causes, because they are built to be wider than the visible area.
4. Long words and unbroken strings
A long email address, URL or headline word in a large font cannot wrap on a narrow screen, so its text box grows past the edge. Webflow’s Typography settings for word breaking, or a smaller heading size at Mobile portrait, solve it.
How to fix it
- Preview the site at each breakpoint in the Designer and try to scroll sideways. Then publish, open the live site in Chrome device mode at 390px and hover through the sections in the Elements panel; the highlighted box that extends past the right edge of the screen is the culprit.
- Select the parent Section of the element that overflows and, in the Style panel under Size, set Overflow to Hidden. If you need the direct wrapper to stay visible for shadows, apply it one level up.
- Replace fixed pixel widths with a percentage or max-width at the Mobile breakpoints, and remove negative margins there.
- Swap any 100vw width for a full-width setting on an element that sits outside padded containers.
- Remember that overflow hidden on a parent breaks position: sticky on elements inside it; if a sticky element stops sticking, move the clipping to a different wrapper.
- Publish and test on a real phone.
How to check it's fixed
- At 479px in the browser and on a real phone, swipe sideways on every page; nothing should move.
- Scroll through slower pages fully, since some interactions only push content out once they trigger.
- Rotate the phone to landscape and back, because the Mobile landscape breakpoint has its own styles and can overflow on its own.
What a QAlaunch scan shows for this
- Horizontal overflow at phone width, flagged from the screenshots by the visual review with the area that sticks out.
- Overlapping or clipped elements on the phone layout.
- Layout shift while the page loads, which off-screen animations can cause.
- Only the pages included in the scan are checked: the free scan covers the homepage, so a wide element on an inner page needs a paid report or your own swipe test.
See exactly what a full report contains in the sample report.
Frequently asked questions
Why not just set overflow hidden on the body?
It hides the symptom but can break sticky positioning and scroll-based interactions, and on some mobile browsers the page can still move. Clipping the specific section is safer.
Why does the white space appear only on the live site?
Interactions and embeds load fully on the published site, and real phones are narrower than the Designer’s preview widths, so overflow that is borderline in the Designer becomes visible.
Does sideways scrolling affect SEO?
Content wider than the screen is one of the problems Lighthouse and mobile usability checks report. More directly, it makes the site feel broken to phone visitors.
Rather have a QA engineer test it by hand?
If this is a site you're launching or handing to a client, I'll go through it by hand, including the Webflow-specific issues a scan can't reach, like logged-in flows.
- Up to 10 key pages tested by hand, not a scan
- Every flow a customer uses: forms, sign-up, checkout, booking
- Real mobile and desktop browsers
- A written report in plain language, with screenshots
- A 15-minute call to walk you through it
- 10 years of professional QA experience
Tell me about your site and I'll reply personally, usually the same day.
No payment now. I'll confirm scope and price first.
Related fixes
More for Webflow: all Webflow fixes
Written by Waqas Ahmad, QA engineer with 10 years of professional testing experience. Last checked October 26, 2026.
Sources: Webflow Help: overflow hidden · Webflow community: horizontal scrolling and overflow hidden