Is there a Webflow bug causing the project sliders on my homepage to only slide images halfway, resulting in two half images side by side?
TL;DR
- Set the slider and each individual slide to 100% width and ensure proper overflow hidden settings on the mask.
- Remove conflicting layout styles (e.g. flex, grid, margin, padding) on both slides and nested elements.
- Check for custom code or scripts affecting widths or transforms, and test in a published site at 100% browser zoom.
If your Webflow homepage slider is only showing half of each slide, with two half-images side by side, it's likely caused by a layout or styling issue, not a Webflow platform bug.
1. Check Slider Width and Overflow Settings
- Select the Slider element in Webflow’s Designer.
- Ensure the “Slides” container is set to 100% width and not limited by max-width or fixed width.
- Check that “Overflow: hidden” is correctly set on the
.w-slider-maskclass to prevent extra content from showing.
2. Inspect Slide Element Sizing
- Select the individual “Slide” elements.
- Confirm they are set to 100% width, and aren't constrained via margin, padding, or fixed width values.
- Avoid any conflicting flexbox or grid layout styling applied to the slide itself or its parent containers.
3. Review Nested Elements Inside Slides
- If you’ve added Images, Divs, or CMS Collection Lists inside each slide, verify:
- Each child element is also set to 100% width or designed to fully fill the container.
- There is no unintended padding/margin pushing content beyond its boundary.
4. Check Custom Code or Scripts
- Inspect any custom CSS or JS added in the page settings or inside the embed/code blocks that might alter slider behavior.
- Look for code affecting Slider container, Slides, or their widths, especially transform or translateX values.
5. Test in Preview and Publish
- Sometimes Designer updates aren’t reflected properly until you publish the site.
- Click Publish and check the live site to see if the glitch persists.
6. Browser Zoom or Scaling
- Occasionally, browser display issues may cause visual glitches in the Designer only.
- Test your slider at 100% zoom on Chrome or Firefox, or in Incognito mode to rule out extension conflicts.
Summary
This issue is almost always due to slider styling misconfiguration, not a Webflow bug. Double-check that both the slide container and individual slides are set to 100% width, there's no conflicting layout like hidden overflow or margin, and test the published site to confirm behavior.