Find what makes your mobile website scroll sideways.

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 →

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.

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.

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.

.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 →

Document the failing width and expected result →

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.