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

You can create a horizontal scroll in Webflow for images, text, or layouts—especially useful on mobile—for interactive content sections like carousels or galleries. Here’s how to do it.

1. Wrap Scrollable Content in a Container

• Add a Div Block and give it a class like scroll-wrapper.
• Set overflow to "scroll" or "auto".
• Set display to "flex" and choose horizontal direction (Row).
• Optionally, set a fixed height (e.g., 200px) if needed for styling.

2. Configure Child Elements

• Add image blocks, text blocks, or layout sections as child elements inside the scroll-wrapper.
• Set their widths manually (e.g., 260px) or percentage-based (e.g., 80%) depending on your layout.
• Set flex-shrink to 0 to prevent them from shrinking on resize.

3. Make It Mobile-Friendly

• For mobile viewports, ensure the scroll-wrapper is:
• Set to 100% width.
• Using overflow-x: scroll and overflow-y: hidden if scrolling should only be horizontal.

4. Optional: Hide Scrollbars for Cleaner Look

• Webflow doesn't have a direct UI for this, but you can add a custom embed with CSS inside a <style> tag in the page head or via Embed element:
• On supported browsers, apply:
  scroll-wrapper { -ms-overflow-style: none; scrollbar-width: none; }
  and
  scroll-wrapper::-webkit-scrollbar { display: none; }

5. Optional: Add Scroll Snap

• Enable scroll snapping for smoother UX:
• On the scroll-wrapper, use custom styles like:
  scroll-snap-type: x mandatory;
• On each child, add:
  scroll-snap-align: center;

Summary

You can achieve horizontal scroll in Webflow by using a flex container with horizontal overflow, properly sizing inner elements, and optimizing scroll behavior for mobile. For added polish, use custom CSS to hide scrollbars or enable scroll snap.