Is there a way to create a horizontal scroll for images, texts, and layouts on mobile using Webflow?

You can create horizontal scrolling for images, text, or entire layouts on mobile in Webflow using overflow settings and flexbox or custom interactions.

1. Use a Horizontal Flexbox Container

• Add a Section or Div Block that will act as the scrollable area.
• Set its overflow to "auto" under the Layout settings.
• Set its display to "flex" and flex direction to "row".
• Inside this container, add your content blocks (e.g., images, text blocks) and set their width appropriately (e.g., fixed pixels or min-width in percentage).
• This will allow mobile users to scroll horizontally through the content.

2. Set Overflow Behavior

• Select the scroll wrapper (main container).
• Under the Style panel → Layout, set:
• Overflow-X: auto
• Overflow-Y: hidden
• This ensures horizontal scroll is enabled while vertical scroll is disabled.

3. Ensure Wide Enough Content

• The content inside the scrolling container must exceed the viewport width to trigger horizontal scroll.
• Set min-widths on child Divs (e.g., 300px or 100vw) to ensure they push beyond the container.

4. Optional: Hide Scrollbar (Design Cleanliness)

• In the custom code panel (before ), you can add a style to hide scrollbars on touch devices:
• Example: ::-webkit-scrollbar { display: none; } (only if needed, not required for function).

5. Test on Mobile Viewports

• In Webflow Designer, switch to mobile landscape and mobile portrait views to ensure the interaction behaves properly.
• You can also publish and test directly on an actual mobile device.

Summary

To enable horizontal scrolling for mobile in Webflow, use a flex container with overflow-x set to auto and ensure the inner content exceeds the viewport in width. This approach works for images, text, or entire layouts and is fully responsive.