How can I create a side-scroll effect in Webflow where content, such as images, can be scrolled left and right on mobile without using sliders?

To create a side-scroll effect in Webflow where content like images scrolls horizontally (left and right) on mobile devices — without using sliders — you need to use a combination of flexbox, overflow, and scroll setup.

1. Create the Horizontal Scroll Section

• Drag a Div Block into your page; this will be your scroll container.
• Name it something like scroll-container.

2. Set Scroll Container Styles

• Set Display to Flex.
• Set Flex Direction to Horizontal (Row).
• Set Overflow X to Scroll.
• Set Overflow Y to Hidden.
• Disable Wrap by setting Wrap Children to No Wrap.
• Add padding or gap if needed for spacing between items.

3. Add Scrollable Items (e.g., Images)

• Place Image Blocks or other content inside the scroll-container.
• Set each item’s width to something appropriate like 200px, 300px, or 80vw, depending on your design.
• If using images, make sure they’re set to Display: Block and avoid max-width: 100% if it's unintended.

4. Optimize for Touch Devices

• On mobile breakpoints, ensure:
• The scroll-container has width: 100%.
• The children don't overflow vertically (minimize height issues).
• Optionally enable momentum scrolling by setting overflow-x: scroll and adding custom code for -webkit-overflow-scrolling: touch via an Embed or Page Settings.

5. Optional: Hide Scrollbar

If you want to hide the scrollbar:

• Add a custom CSS embed in Page Settings > Inside <head>:

  <style> .scroll-container::-webkit-scrollbar { display: none; } .scroll-container { -ms-overflow-style: none; scrollbar-width: none; } </style>

Replace .scroll-container with your actual class name.

Summary

To achieve a horizontal scroll effect on mobile in Webflow without using sliders, use a flexbox container with horizontal scroll enabled and insert fixed-width children inside it. Customize scrollbar visibility and scrolling behavior with minimal CSS if needed.