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?
TL;DR
- Set a flexbox container with horizontal (row) direction, overflow-x: scroll, and no wrap.
- Add fixed-width items (like images) inside the container and ensure proper touch behavior on mobile.
- Optionally, use custom CSS to hide the scrollbar and enable momentum scrolling.
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-containerhas width: 100%. - The children don't overflow vertically (minimize height issues).
- Optionally enable momentum scrolling by setting
overflow-x: scrolland adding custom code for-webkit-overflow-scrolling: touchvia 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.