Different amount of words in Testimonials make rows below move

Hi
I have the testimonials in my front page. It makes everything below the row move up and down according to how big each testimonial is. I have noticed this on the Athemes front page as well.

I have got padding on the row and the widget to try to counteract but it is not working. I have also tried adding blank spaces to attempt to make all the reviews the same length.

Surely I don’t have to edit the reviews to make them all the same size?

Please help
Thanks

Hello Mic,

Can you please provide a link to your website in order to let me inspect it?

Kind Regards, Roman.

Hello

I encounter the same problem. How can I fix that ?

Damien

Hello Damien,

Can you please create your own topic for your question with a link to your website?

Kind Regards, Roman.

Hi Roman

http://686.cf5.myftpupload.com/ homepage, near the bottom.

Thanks a lot :slight_smile:

Hello Mic,

Please try to use the following CSS code to fix this on 768px screens and wider, it will still jump on mobile devices. I limited it in order to avoid big noticeable gaps on mobile screens. You might want to move testimonials to the very bottom in order to minimize that jumping.

You can add CSS code to your site with Simple Custom CSS plugin (just copy CSS code and paste it in Dashboard → Appearance → Custom CSS after installing and activating the plugin). Also you can add CSS code directly to style.css file of your child theme.

@media only screen and (min-width: 768px) {
    .widget_sydney_testimonials div.owl-item {
        height: 310px !important;
    }
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Hi
It has stabilised on larger screens, thanks.
I think I will just take off the big review - or cut it to minimise the effect more. And make yet another page, for more reviews!
Shame. Hopefully this could get addressed in an update.

Thanks for you help

There isn’t really anything to address about this. The page slides down if the testimonials vary in height so that you don’t end up with an empty space.

That’s why the autoheight option exists in the script we’re using for the testimonials, so that empty space can be avoided. At most we can add an option to disable it, which will basically provide the same effect as the code Roman gave you.

Hey there!

Same problem. I tried the CSS mentioned above but it does not work. What do I have to do in order to get a fixed height for the testimonials row?

Thank you very much for your kind help!
Beate

Hi,
It was some time ago now but CSs worked a little but ultimately I had to try and use reviews with similar amount of words or cut it down using Blah blah …blah blah. I don’t think using line spaces or spacing between words worked. So similar amount of line text minimalised the impact. Good luck !

@mic: Thank you for your message. In the meantime I managed to get a fixed height by changing CSS for “.owl-carousel .owl-wrapper-outer”. I only have to change CSS for mobile devices, too. Thank you very much! Beate

Hello everyone,

Here is another possible solution:

Kind Regards, Roman.