# Fix mobile horizontal scroll

> Find the element causing horizontal scrolling on mobile. Check fixed widths, flex and grid sizing, long text and media, then verify the CSS fix.

Canonical page: https://sitepeel.dev/guides/fix-horizontal-scroll-mobile/

An unwanted horizontal scrollbar usually means something is wider than its available space. Locate that element, understand why it cannot shrink, and fix the layout at the source.

Published: 2026-09-28

Tool used in this guide: [Responsive viewer](https://sitepeel.dev/responsive-website-viewer/index.md)

## How to use it

1. **Reproduce at a known width** Open the affected route at the failing CSS viewport width and keep the same page state.
2. **Find the first overflowing element** Inspect the right edge, then check the element and its parent for sizing constraints.
3. **Fix and retest nearby widths** Change the responsible CSS, reload, and check menus, focus and longer content.

## Make a small, repeatable failing case

Start with the route and state where sideways scrolling occurs. A closed menu and an open menu are different tests. So are an empty form and the same form after a long validation message. Record the CSS viewport width rather than the monitor resolution or the phone name alone.

In Responsive viewer, keep one narrow preview beside a wider one. Change the viewport dimensions to test the layout; the scale slider only changes how large the preview looks in your workspace. Turn off synchronized scrolling when you need to inspect different positions independently.

- [Compare the page at several viewport widths](https://sitepeel.dev/responsive-website-viewer/index.md)

## Locate the overflow before hiding it

A quick starting check in the inspected page’s DevTools console compares its scrollable width with the visible document width. The snippet below then lists elements whose bounding rectangles cross the right edge. Run it in the affected page or frame, at the same scroll position as the problem.

Treat the list as suspects, not a verdict. Off-canvas navigation, carousels and decorative transforms can legitimately extend outside their boxes. Inspect the earliest unexpected overflow and its parent. Temporarily disable the relevant width or minimum width in DevTools to see whether the document returns to the expected size.

Example: find-overflow.js

```
const viewport = document.documentElement.clientWidth;
console.log({ viewport, scrollWidth: document.documentElement.scrollWidth });
const suspects = [...document.querySelectorAll('body *')].filter(el => {
  const r = el.getBoundingClientRect();
  return r.width > 0 && r.right > viewport + 1;
});
console.log(suspects);
```

## Match the fix to the cause

A fixed 600px panel cannot fit inside a 360px screen with side padding. Replace the rigid assumption with a maximum width and allow the panel to use the space available. For flex or grid content, check whether an automatic minimum size is preventing the child from shrinking.

Long URLs, filenames and unbroken product codes need their own wrapping decision. Large tables may need a clearly bounded horizontal scrolling region instead of shrinking every column until the content becomes unreadable.

Common causes and focused fixes

| Cause | What to inspect | Possible correction |
| --- | --- | --- |
| Fixed-width card | width and padding on the card | width: 100%; max-width: 600px; box-sizing: border-box |
| Flex or grid child | Automatic minimum size | min-width: 0 on the child that must shrink |
| Unbroken URL | Text wrapping in the affected block | overflow-wrap: anywhere |
| Oversized media | Intrinsic image or video dimensions | max-width: 100%; height: auto |
| Data table | Whether every column must stay visible | A labeled wrapper with overflow-x: auto |

## A concrete card layout repair

Imagine a product row with a thumbnail, a long name and a purchase button. On a narrow screen, the name holds the row open and pushes the button outside the viewport. Let the text track shrink, allow long content to wrap, and stack the button when the composition stops working.

The following is an example for your source stylesheet, not a universal reset. Choose the breakpoint by watching this component with real content. Leave intentional scrolling regions and other page components alone.

Example: product-row.css

```
.product-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 12px;
}
.product-copy { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 420px) {
  .product-row { grid-template-columns: 64px minmax(0, 1fr); }
  .product-action { grid-column: 1 / -1; }
}
```

## Check the fix beyond a single screenshot

Test the failing width, a slightly narrower width and a slightly wider width. Open navigation, trigger errors and tab through controls. A page can appear fixed because overflow is clipped while the focused button is still outside the visible area.

Avoid adding overflow-x: hidden to the whole page as your first response. It can conceal the symptom while leaving content unreachable. After the source fix, use Inspect & measure to check the spacing, capture the result and verify the important flow in the target mobile browser.

- [Inspect the element and its parent](https://sitepeel.dev/css-inspector/index.md)
- [Document the failing width and expected result](https://sitepeel.dev/guides/website-bug-report-screenshots/index.md)

## Using these tools in Sitepeel

The Sitepeel steps below describe the 1.0.3 tools. Preview 1.0.3 here. Browser-store availability may vary while the update rolls out. Try them on public Sitepeel pages in the website demo; use the installed extension for other websites. Changes made with inspection and preview tools do not publish changes to a website.

## Questions and answers

### Does a phone mockup fix responsive CSS?

No. A frame helps visualize a device. Fix the CSS in the source project and reload the preview to check the result.

### Should I remove all horizontal scrolling?

No. A table or gallery may intentionally scroll inside its own region. The problem is unexpected page-wide scrolling or content users cannot reach.

## Further reading

- [MDN: minimum width and automatic sizing](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/min-width)

## Related pages

- [Responsive viewer](https://sitepeel.dev/responsive-website-viewer/index.md): Preview a website at phone, tablet, foldable and desktop sizes. Compare layouts, drag devices, adjust scale and capture references with Sitepeel.
- [Test responsive layouts](https://sitepeel.dev/guides/test-responsive-website-layouts/index.md): Compare mobile, tablet and desktop layouts with Sitepeel. Test breakpoints, foldable widths, navigation and long content, then verify on real devices.
- [Measure layout spacing](https://sitepeel.dev/guides/measure-website-spacing/index.md): Inspect the spacing behind a website layout. Understand padding, margin and container relationships with Sitepeel’s visual ruler.