If you are building a horizontal slider or gallery in Webflow and one of your items is shrinking, you are not alone. This is a common issue that can be frustrating, but the fix is usually simple. This guide will show you the two most effective ways to stop your Webflow CMS gallery items from shrinking, with clear, step-by-step instructions.
Who is this for?
This guide is for Webflow users who are building dynamic galleries using the CMS and encountering layout issues where items resize incorrectly.
Why do CMS gallery items shrink in Webflow?
Gallery items shrink because of how flexbox works. When you place items inside a flex container, they are designed to be flexible and responsive. By default, these items are set to shrink if the container is too small to fit them all at their defined width. This is usually helpful for responsiveness, but it can cause problems in sliders and horizontal scroll layouts where you want items to maintain a fixed size.
How to Fix a Shrinking Slider Component
If you are using Webflow’s built-in Slider component, you need to control the width of each slide directly. The slider settings override individual flexbox settings.
- Select the Slider component on your canvas.
- In the Style panel, click on one of the slide indicators (e.g., “Slide 1”) to edit all slides at once.
- With the slide selected, go to the Size section in the Style panel.
- Set a width for each breakpoint:
- Desktop (3 items): 33.33%
- Tablet: 50%
- Mobile: 100%
- Make sure to adjust these settings for every breakpoint where your gallery is visible.
This method tells each slide exactly how much space to take up within the slider container, preventing unwanted shrinking.
How to Stop a Horizontal Scroll Gallery from Shrinking
For a custom horizontal scrolling gallery built with a CMS Collection List wrapped in a div set to display: flex and overflow-x: auto, you need to adjust the flex properties of the individual items.
- Open the Navigator panel (
CMD+Shift+EorCtrl+Shift+E). - Select the Collection Item (the repeating div that holds your image and text).
- In the Style panel, navigate to the Flex Child settings (icon of a small flexbox).
- Find the setting for Flex shrink and set it to 0.
- Alternatively, use the dropdown and select “Don’t shrink or grow”.
This action tells the browser that this specific element should not shrink under any circumstances, forcing it to maintain the dimensions you have given it. This is the most direct solution for a custom horizontal scroll setup.
What if My Gallery Navigation is Causing Issues?
Sometimes, navigation arrows or dots can interfere with your layout, especially on smaller screens. If you have followed the steps above and still see issues, check your slider’s navigation settings.
Inside the Slider component settings, you can often adjust the position of navigation arrows or choose to hide them on specific breakpoints. This can free up space and ensure your slide width percentages calculate correctly based on the available space
Conclusion
A shrinking gallery item is almost always a flexbox issue. For official Slider components, control the slide width with percentage-based sizing for each breakpoint. For custom horizontal scroll galleries, select the collection item and change its flex child setting to not shrink.
