Does your Shopify store scroll sideways on mobile, and how do you find the cause?
You can look at your store every day and still miss a mobile problem.
We did.
When we checked lunalink.ai in a phone-sized viewport, every page scrolled sideways by 59 pixels. Our navigation needed 430 pixels. The phone viewport gave it 375.
We had looked at the site dozens of times. We just had not looked at it that way.
A small horizontal scroll can feel minor on a desktop browser. On a phone, it makes the whole page feel loose. Customers expect to scroll up and down. If the page moves sideways too, it can be hard to tell whether they have reached the edge of an image, a product carousel, or the page itself.
Shopify treats content wider than the mobile screen as a mobile usability problem. The fix is usually not a new app or a redesign. It is finding the one element that does not fit.
First, check whether the page really overflows
Open your storefront in Chrome on a computer.
Then:
- Right-click the page and choose Inspect
- Click the phone-and-tablet icon in DevTools
- Choose a phone size, or set a custom width
- Reload the page
- Try dragging the page left and right
Chrome DevTools device emulation matters here. A page can look fine across a wide desktop window while one part extends beyond a narrow screen.
Check more than the homepage. Start with:
- Your homepage
- A product page
- A collection page
- Your cart
- A policy page
- Any page with custom sections
You are looking for page-level movement, not a deliberate horizontal product slider. A row of products may be meant to scroll inside its own area. The rest of the page should stay within the viewport.
In our case, the navigation was the cause. Its contents had a minimum practical width larger than the phone screen. Once we could see the page in a 375-pixel viewport, the problem was obvious.
Find the part that is too wide
The cause is often a single child element. It may sit inside a section that otherwise looks normal.
Shopify lists several common causes:
- A fixed width, such as `width: 1200px`
- An image without a sensible maximum width
- A wide table
- Pre-formatted text in a `pre` block
- An absolutely positioned element with fixed coordinates
- A CSS transform that reaches beyond the viewport
Community troubleshooting advice points to similar places: large images, custom sections, wide text boxes, margins, padding, and elements using `position: absolute` or `position: fixed`.
Start with anything recently changed. A new announcement bar, review widget, image block, app embed, custom code block, or page-builder section is a useful suspect.
If the issue appears only on one page, compare that page with a page that does not scroll sideways. Look for sections that exist on one but not the other.
If it appears everywhere, inspect shared parts of the theme first:
- Header and navigation
- Announcement bar
- Cart drawer
- Footer
- Site-wide app embeds
Use DevTools without guessing
Open the Elements panel in Chrome DevTools. This shows the page’s HTML structure and the styles applied to each element.
Click the element picker icon, then move over the page. Chrome highlights the element under your cursor. On a narrow viewport, look for a highlighted box that reaches past the right edge of the screen.
You can also inspect likely elements in the DOM tree and check their CSS in the Styles panel.
Look for rules like these:
```css width: 1200px; min-width: 430px; margin-left: 80px; position: absolute; left: 300px; transform: translateX(50px); ```
None of these rules is always wrong. A desktop menu may need space. A carousel may intentionally use a transform. The question is whether the element still fits at the phone width you are testing.
Chrome also shows a scroll badge beside some elements in the Elements panel. It appears for scroll containers: elements using `overflow: scroll`, or `overflow: auto` when enough content overflows.
That badge can help you spot an area designed to scroll. But do not assume it identifies the guilty child. Chrome’s current scroll badge checks overflow on either axis, and it may identify the container rather than the element making the page too wide.
So use it as a clue. Then inspect the children inside it.
Test a suspected fix before editing your theme
DevTools lets you change CSS in your browser without publishing anything.
Say you select an image that is wider than its container. In the Styles panel, try adding:
```css max-width: 100%; height: auto; display: block; ```
If the sideways scroll disappears, you have found a useful direction. Then make the matching change in your theme code or ask your developer to do it.
For a fixed-width content block, test a rule like this:
```css width: 100%; max-width: 700px; box-sizing: border-box; ```
The right maximum width depends on the element. A product image, a newsletter form, and a navigation menu need different layouts. But the pattern is the same: let the element shrink with the screen, while keeping a sensible upper limit on larger screens.
Be careful with padding too. An element with `width: 100%` plus horizontal padding can still exceed its parent unless the box model is handled correctly. `box-sizing: border-box` includes padding and borders within the declared width.
Do not start by hiding horizontal overflow
You may find a quick fix like this in theme forums:
```css html, body { overflow-x: hidden; } ```
This clips content that extends past the page and removes the horizontal scrollbar. It may make the symptom disappear.
It does not tell you why the page was too wide.
That matters because the clipped content could be part of a menu, a button, an image, or a form. The customer may no longer be able to reach it.
There are cases where a contained section should hide its own overflow. For example, a decorative shape may deliberately extend beyond a banner. Apply that rule to the specific section when you understand the layout.
Do not use a site-wide `overflow-x: hidden` as your first diagnosis.
Check the fix on real sizes
Once you have changed the theme, test again in a narrow viewport.
Try at least two widths. Our issue appeared because the navigation required 430 pixels while the viewport was 375 pixels. A layout can fit at one phone width and fail at another.
Also check whether the change breaks a desktop layout. A mobile fix should not make a navigation wrap awkwardly or make a product image too small on wider screens.
If you want one useful task to do now, open your homepage in Chrome device emulation at 375 pixels wide. Drag the page sideways. Then repeat on one product page.
You may find nothing. That is a good result.
If it moves, do not hide it first. Find the box that does not fit.