Framer site scrolls sideways on mobile: find and fix the wide element
A Framer page scrolls sideways on phones when at least one element is wider than the screen: a fixed pixel width, a minimum width larger than the viewport, an absolutely positioned element hanging off the edge, an animation that slides or scales something past the edge, or a Fit-width element that grows too wide. Find that element at the Phone breakpoint and set its width to Fill or adjust its position. Avoid hiding the problem with Overflow: Hidden on the whole page, because it can break sticky elements.
What you'll see
On a phone the page moves left and right when you scroll, a white strip appears on the right side, or the page zooms out slightly on load. It may only happen in one section, or only while an entrance animation plays.
Why it happens
1. Fixed or minimum widths wider than the phone
A stack set to 1200px, or a component with a min width of 500px, keeps that width at the Phone breakpoint. Everything else fits, but that one element pushes the page wider.
2. Absolute positioning near the edge
Decorative shapes, blurred gradients and floating badges placed with absolute positioning often sit partly outside the frame. On desktop the overflow is hidden by the wide layout; on a phone it extends the page.
3. Animations that move elements off screen
Appear effects or scroll animations with an X offset, rotation or scale start an element beyond the edge. Even if it ends inside the screen, the starting position creates sideways scroll.
4. Fit-width text or embeds
A text layer set to Fit width with a long word, URL or headline, or an embed with a fixed width, grows until it no longer fits.
How to fix it
- Open the Phone breakpoint in the Framer canvas, select the page and scan the layers panel for anything whose width is a pixel value larger than the breakpoint width.
- Change those widths to Fill, or set a Max Width instead of a fixed width, so they shrink with the screen. Remove min widths that exceed a phone screen.
- Check absolutely positioned layers in each section. Move them inside the frame at the Phone breakpoint, scale them down, or hide them on phones.
- Open the effects on elements that animate in and reduce X offsets, rotation and scale at the Phone breakpoint so the starting position stays on screen.
- If a decorative section must bleed past the edge, set that section’s Overflow to Clip rather than Hidden. Clip cuts off the excess without creating a scroll container, so sticky elements elsewhere keep working.
- Publish, then test on a real phone and in your browser’s device toolbar by trying to drag the page sideways in every section.
How to check it's fixed
- At 375 and 390px wide, the page cannot be dragged horizontally in any section, including while animations play.
- Sticky headers and sticky sections still stick after your overflow changes.
What a QAlaunch scan shows for this
- Horizontal overflow at 390px, where the document is wider than the viewport, seen in the phone screenshot and visual review.
- Elements cut off, overlapping or hidden at phone width.
- Layout shift during load, which often comes from the same entrance animations.
See exactly what a full report contains in the sample report.
Frequently asked questions
Why not just set Overflow: Hidden on the page?
It hides the symptom, but Framer’s own help article warns it can break sticky elements, because hidden overflow turns the container into a scroll area. Fix the wide element, or use Clip on the one section that needs it.
It looks fine in the Framer preview. Why does my phone scroll sideways?
Real phones vary in width and browsers handle animations and fonts slightly differently. An element that is a few pixels too wide may only overflow on some devices or while an animation is mid-way.
How do I find the element quickly?
In your browser’s DevTools at phone width, look for the element whose box extends past the right edge of the viewport. Then find the matching layer in Framer and fix it at the Phone breakpoint.
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 Framer-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 Framer: all Framer fixes
Written by Waqas Ahmad, QA engineer with 10 years of professional testing experience. Last checked October 26, 2026.
Sources: Framer Help: fix horizontal scrolling on mobile · Framer University: fix unwanted horizontal scrolling · Framer Help: Overflow Clip