Skip to content

Locomotive Scroll Breaks 3-Column Layout on Mobile (Only in Real Devices) #576

@showrovSMS

Description

@showrovSMS

Hello 👋

Describe the bug
Locomotive Scroll is causing a 3-column flex/grid layout to break on real mobile devices. The left and right columns disappear, leaving only the center column visible. However, when inspecting the mobile layout using Chrome DevTools (responsive mode), it works as expected.
Website Link

The issue only occurs on real mobile devices (tested on iOS Safari, iOS Chrome, and Android Chrome). When Locomotive Scroll is disabled, the layout displays correctly.

To Reproduce
Steps to reproduce the behavior:

  1. Create a 3-column layout inside a .locomotive-scroll container.
  2. Enable Locomotive Scroll with smooth: true for all devices.
  3. Open the site on a real mobile device (not just in DevTools).
  4. Notice that only the center column appears, while the left & right columns are missing.

Expected behavior
All 3 columns should be visible on mobile, maintaining their defined widths, with only partial cropping on the left/right edges (as intended).

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):
OS: [e.g., macOS, Windows]
Browser: [e.g., Chrome, Safari]
Version: [e.g., 123.0]

Smartphone (please complete the following information):
Device: [e.g., iPhone 13, Samsung Galaxy S22]
OS: [e.g., iOS 17, Android 14]
Browser: [e.g., Safari, Chrome]
Version: [e.g., latest]

Thank you 👊

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions