To horizontally center all slides in your Webflow testimonial slider, you need to adjust the layout and alignment settings within the slider component.
1. Select the Slide Element
- Click on any slide inside the Slider component (e.g., Slide 1, Slide 2).
- In the Style panel, ensure you're styling the
Slide
class, not a specific slide.
2. Set Display and Alignment
- Set the Display of the Slide to Flex.
- Choose Horizontal (Row) or Vertical (Column) layout depending on your content.
- Set Justify: Center to center the content horizontally.
- Set Align: Center to center the content vertically if needed.
3. Check Width Settings
- Make sure your slide content is not wider than the slide itself unless intentionally designed that way.
- If your testimonial block or container inside the slide has fixed widths or padding, ensure they're optimized for centering.
4. Slide Content (Testimonials) Settings
- Select the content inside the slide (e.g., a Div Block wrapping the text/image).
- Set its Margin: auto left and right or ensure it’s not using excessive left/right margin or float.
5. Avoid Overflow Issues
- Make sure none of the inner elements are using
position: absolute
or have widths that overflow the slide. - If needed, enable Overflow: hidden on slide content wrappers to limit visual overflow.
Summary
To center slide content in Webflow, apply Flex display to the Slide
class, use Justify Center, and ensure the content inside each slide is properly sized and doesn't unbalance alignment. This keeps each testimonial aligned in the middle of every slide.