How can I fix the issue with my Webflow slider where the image is not displaying full-width and is showing part of the next image? Here is my site's Read-Only link: <br> ().

Your Webflow slider images are not displaying full-width and are showing part of the next image due to incorrect sizing or overflow settings. Follow these steps to fix the issue.

1. Adjust the Slider Width

• Select the Slider element in Webflow.
• Set Width to 100% to ensure it spans the full container width.
• Ensure Overflow is set to Hidden to prevent parts of the next slide from appearing.

2. Fix the Slide and Mask Container

• Select the Slide inside the slider.
• Set Width to 100% and Height to Auto (or define a set height).
• Select the Mask element and ensure it's Width 100% and Overflow: Hidden to clip excess content.

3. Ensure Images Are Covering the Slide

• Select your Image inside the Slide.
• Set Width to 100% so it stretches within the slide.
• For background images, apply them via Slide Settings > Background and set Size: Cover to fill the container properly.

4. Check Flexbox or Grid Settings

• If using Flexbox or Grid, ensure images are inside a structure that allows full width.
• Avoid unnecessary margins or paddings that could cause slides to shift.

5. Test Responsiveness

• Switch to different breakpoints (Desktop, Tablet, Mobile) and confirm the images are scaled correctly.
• Adjust Max Width settings if necessary to prevent unwanted resizing.

Summary

Ensure the Slider and Mask are set to Overflow: Hidden, images and slides are set to Width: 100%, and background images use Cover mode. Check responsive settings to ensure images remain full-width without revealing the next slide.