First time posting here. I am looking for some help getting these arrows from the webflow slider on mobile to be positioned centered underneath my testimonial content (see screenshot) but also to be responsive (moving up and down) based on the amount of text in the testimonial slider. I’ve been trying a bunch of different things and nothing is working to make the position of the arrows adapt based on the content in the slider.
Ideally the height of the whole container would resize based on the content, but I can’t figure that out either.
Not vertically responsive. You’ll have to use a fixed pixel height on the main component. Determine how much room you need for your longest quote. (#8 in your case, so about 250-300px). Luckily, your quotes are somewhat similar in length.
Never apply styles to the individual slides themselves. Remove the class you’re using now.
Instead, put a div inside of the slide and give it a width & height = 100%, then design within that div.
In your case, the div inside of the slide will use Flexbox with Direction = “Vertical” and apply horizontal & vertical centering. This will keep all quotes centered to each other and with the arrows.
Remove the 100px of padding you’ve added to the bottom of the arrow divs and your arrows will center with the quote text.
Last, for the smaller breakpoints, you’ll need to change the pixel height of the main slider component, allowing enough room for slide #8 to fit all text.
You’ll change the width of the slider arrow divs at each breakpoint. You’ll need smaller on phone views.
You’ll want to remove the 40px of margin you’ve added to the icons. If you want the arrows to be farther away from the text, you can use more padding on the div used in your slide.
Be sure to test your longest quote within each breakpoint by using the viewport width adjuster. I’ve attached a screen grab showing this useful tool.
