Shopify page scrolls sideways on mobile? Free scoped text-section fix

[vistabylara-dev]

Use the free Shopify Help Finder to get checks for this problem and a copyable help summary. No email or store login required. This guides your next check; it does not inspect your store.

متجر Shopify يتحرك يميناً ويساراً على الجوال؟

ظهور مساحة فارغة بجانب الصفحة قد يعني أن عنصراً يتجاوز عرض الشاشة. قبل إخفاء التمرير، حدد العنصر المسبب حتى لا تختفي معه أزرار أو أجزاء من المحتوى.

هذا المثال المجاني مخصص لقسم نصي بسيط يحتوي على كلمات أو روابط طويلة. اختبره في نسخة غير منشورة من الثيم. لا يصلح تلقائياً كل مشاكل الصور أو السلايدر أو التطبيقات.

Topic 06/50 — Mobile horizontal scrolling caused by custom text

A customer opens your store on a phone and the whole page slides sideways. A long URL, a fixed-width custom section or padding added outside a full-width box can be part of the cause.

A Shopify Community Horizon discussion from 27 September 2026 reports unwanted horizontal scrolling on one page. It establishes that this symptom is being discussed; it does not prove that every Horizon store has the same defect. The code here is an original text-section example, not a verified repair for that merchant's carousel.

First identify the overflowing section

1. Duplicate the theme and preview the affected page on mobile.
2. In the duplicate's theme editor, hide a suspected custom section and preview again. Restore it before checking another section.
3. If the sideways movement disappears, inspect that section in browser developer tools. Check fixed widths, minimum widths, viewport-width sizing, unbreakable text and extra padding.
4. If hiding it changes nothing, keep investigating. Adding unrelated CSS will not identify the culprit.

An intentional carousel can scroll inside its own container. The problem here is unintended scrolling of the entire page.

Free code: a text section that fits its container

Caution: Use an unpublished duplicate. This is a complete NEW section for simple rich text. Do not overwrite a product section, carousel or theme.liquid. Installing it does not repair other sections. Do not apply these descendant rules to a complex gallery or app widget.

Create sections/vbl-fluid-text.liquid in the duplicate theme's code editor and paste this complete file:

{% if section.settings.text != blank %}
  <div class="vbl-fluid-text">
    {{ section.settings.text }}
  </div>
{% endif %}

{% stylesheet %}
  .vbl-fluid-text {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 1rem;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .vbl-fluid-text * {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }
{% endstylesheet %}

{% schema %}
{
  "name": "VBL fluid text",
  "settings": [
    { "type": "richtext", "id": "text", "label": "Text" }
  ],
  "presets": [{ "name": "VBL fluid text" }]
}
{% endschema %}

Open the duplicate in the theme editor, select a template that supports sections, add VBL fluid text, and enter your text. The section is intentionally empty until you enter content.

If you have confirmed that an old, simple custom text section causes the overflow, copy its text into this new section and temporarily hide the old section in the duplicate. Compare the result before deciding to replace it. Keep the original for rollback.

Why these rules are scoped

The width follows the parent container. Border-box sizing includes padding in that width. Long uninterrupted text can wrap, and normal white-space allows text to break across lines. All selectors stay inside the example's unique class; they do not target the entire body, every heading or every link in the store.

This section still depends on its parent fitting the page. It cannot repair an oversized outer grid, translated element, fixed-width iframe or unrelated slider. Existing stronger theme styles can also override these rules. The rich-text setting is rendered as HTML so its paragraphs, lists and links remain usable.

Test before publishing the theme

Test	Expected result
320px, 375px and 390px viewport widths	Example text stays within its container
A long unbroken word and a long visible URL	Text wraps without forcing this section wider
Arabic and English content	Text remains readable; inherited page direction is respected
Links reached with the keyboard	Focus remains visible and links work
Larger text or browser zoom	Content reflows without being cut off
Desktop preview	Paragraphs and lists remain usable
Empty text	No inner text box; outer theme spacing may remain
Original suspected section hidden, then restored	Confirms whether that section contributes to the problem

Also open your mobile navigation, cart drawer and product gallery. Test variant selection and Add to cart. A page that no longer scrolls sideways can still have a broken customer journey.

Do not treat a global overflow-hiding rule as proof of a repair. It may conceal off-screen content. This example does not hide overflow; it addresses sizing and text wrapping within one component.

Validation: The section passed Shopify Liquid/theme validation on 24 October 2026. Store-specific visual and interaction tests remain required; no live merchant theme was changed or tested for this publication.

Rollback

Remove the new section from the test template and restore the original section's visibility. Save and preview. Delete the new file only after removing its instances. Keep the published theme unchanged until you have verified the replacement.

References

• Shopify Community: Horizon horizontal scrolling report
• Shopify section schema
• MDN: overflow-wrap
• MDN: box-sizing

Share your mobile theme problem

Tell us your theme name/version, the affected page type, the device width and whether hiding a particular section removes the issue. Share a screenshot or sanitized code excerpt. Do not post store passwords, access tokens or customer details.

Join our free Shopify code-fixing discussion · Follow Vista by Lara on GitHub · Browse our 50-topic roadmap

Join our LinkedIn group and visit Vista by Lara for more practical owner guides.

Call Dr Lara on +971 50 799 4292 for free Shopify guidance and consultation, or message on WhatsApp.

Free guidance. No commitment. No package to sell.