Testemonial widget changing height

Hello!

http://neutontest.de

on the page above i have listet some testemonials. when they switch between one and another the height of the row always varies. When you now scroll further down the page, everytime the testemonials switch the whole page below that widget will kind of ‘autoscroll’ and thats pretty annoying.
Is there a way to make sure the testemonials widget/row is always the samne height and not depending on how long the testemonial actually is?

Thank you!
Tobias

Hi Tobias,

To make equal height on the testimonial items, do the below steps, please.

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box

;(function($) {

  'use strict'

  if( $('.roll-testimonials').length ) {

    $(window).on('load', function () {
    
      var maxHeight = -1;
      $('.roll-testimonials .customer').each(function(){

        if( $(this).height() > maxHeight ) {
            maxHeight = $(this).outerHeight();
        }
        
      });

      $('.roll-testimonials .customer').css('height', maxHeight);

    });
    
  }
  
})(jQuery);


  1. Update

Regards,
Kharis

Hi Kharis!

thank you very much for the code.

Now just the first testimonial that is shown has a slightly different size than the other ones. Its a few px smaller. When it reappears the size of the row stays. Its just the first time you scroll down the page to the testimonials…

any idea if theres a solution for that too?

thank you again!

regards,
Tobias

Hi Tobias,

Please replace the code I’ve suggested with this one:


;(function($) {

  'use strict'

  if( $('.roll-testimonials').length ) {

    $(window).on('load', function () {
    
      var maxHeight = -1;
      $('.roll-testimonials .customer').each(function(){

        if( $(this).height() > maxHeight ) {
            maxHeight = $(this).outerHeight();
        }
        
      });

      $('.roll-testimonials .customer').css('height', maxHeight);
      $('.roll-testimonials .owl-wrapper-outer').css('max-height', maxHeight);

    });
    
  }
  
})(jQuery);

Let me know how it goes.

Regards,
Kharis

Hello Kharis,

sorry it took me so long to get back to you.
sadly the first testimonial shown is still at a different size than the ones following.

Its now under this URL:

Any Idea how to fix this?

greetz Tobias

It’s displaying like this to me.

Cloudup

The code seems to be working as expected. Please try to clear your web browser cache and reload your site.

Regards,
Kharis