Streaming live at 10am (PST)

Testimonial Slider - moving buttons to topside and removing excess space

#1

https://preview.webflow.com/preview/mypromovers?utm_source=mypromovers&preview=7796c56e2851698454152f4317fabce9

I am trying to make the testimonial slider look a little neater… I have an issue with sizing/spacing because one of our testimonials is significantly longer than the others.

I’d like to put the testimonial arrow nav buttons ABOVE the testimonial text so it’s easier for people to interact with, and I wanted to know if there was a way to reduce the extra spacing below the testimonials so that the page reacts to whichever testimonial is showing at the time. Otherwise I have a huge blank space in this section, which looks pretty bad on mobile.

Any ideas for a solution for this? Thank you so much Webflow community!

0 Likes

#2

@Nicholas_DiMoro, why not turn your testimonials into a CMS collection so you can collect and organize better. Once you do this, you can create a using embed code to limit the number of text rows that way everything will be even. Plus you can have a Read More… option to read the full testimonial on a separate page. It would be like turning it into a blog link or similar.

Or you could just use one testimonial per slide as well.

Here is the code I am referring to:

.example-text { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }

For “.example-text” insert the class name of the P tag, for your example it would be: “.text-grey”. This style is called CSS Ellipsis.

Hope that helps.

P.S. for the “stars” you can turn this into a collections filter and use a number system for how many should show up based off the integer.
Just a thought there as well.

1 Like