Find the overflow source
Follow the sequence below from start to finish. The order matters: later steps assume the earlier ones are done.
- Open the published page at the affected width and identify where the horizontal scrollbar begins.
- Inspect sections, stacks and components for fixed widths or minimum widths.
- Check absolute-positioned elements and large transforms that extend beyond the viewport.
- Replace hardcoded widths with max-width, fill or relative sizing where appropriate.
- Retest at the breakpoint above and below the change.
Responsive checks
A few moving parts are involved here. The points below cover each of them, so you can see the full scope before deciding where to start.
- Use consistent page padding at each breakpoint.
- Let long headings wrap instead of forcing a single line.
- Set images to fill their container with a stable aspect ratio.
- Keep buttons and nav links within the viewport.
- Check nested components for their own breakpoint overrides.
If the page is wider than the screen, hiding overflow on the body masks the symptom and can hide a real interaction. Fix the element creating the width.
Components and variants
A component can look correct on the canvas while an instance keeps an old override. Reset the instance override, inspect its active variant and then test the component at each breakpoint.
A rollout checklist for a breakpoint fix
This comes down to a handful of concrete details. Work through the list below and flag the ones you have not covered yet.
- Confirm the fix at the exact width it was reported, not just a round number.
- Check the two breakpoints either side of the fix for a new overflow.
- Check tablet width separately from phone width, since Framer treats them as distinct breakpoints.
- Test with a long piece of real content, such as a client's actual longest heading, not placeholder text.
- Check that fixed headers or sticky elements still respect the new spacing.
Signs the layout will keep breaking
Use the list below as a working checklist. Each item is something you can verify or action directly on your own site.
- Multiple sections use different padding values for what should be the same spacing scale.
- Text is set to a fixed pixel width rather than a percentage or fill.
- A component was duplicated rather than reused, so a fix in one place will not apply everywhere.
- Breakpoint overrides exist on individual layers instead of the parent stack.