Stop testimonials slider from jumping around

Hi,
Thanks for the link, the following script looks for each testimonial slider and finds the tallest inner content and then sets all of the sliders to the same height. Try adding this code to the end of your functions.php file in Appearance > Editor:

function custom_testimonial_height_script(){
  ?>
  <script>
(function($){
  $(window).load(function(){
  	$('.avia-testimonial-row').each(function(){  
     var $columns = $('.avia-testimonial_inner',this);
     var maxHeight = Math.max.apply(Math, $columns.map(function(){
         return $(this).height();
     }).get());
     $columns.height(maxHeight);
});
  });
  })(jQuery);
  </script>
<?php
}
add_action('wp_footer', 'custom_testimonial_height_script');

This code sets the height of .avia-testimonial_inner which keeps the testimonial author title close to the content, this screenshot highlights the area.

If you replace .avia-testimonial_inner with .avia-testimonial-content in the code then the testimonial author title will stay in the same place for each slider, this screenshot highlights the area.

This script will work across your whole site, you can always restrict this to the one page by adding the page ID #top.page-id-5666 to the beginning of .avia-testimonial-row with a space like this:
#top.page-id-5666 .avia-testimonial-row
Please clear your browser cache and check after adding this code.

Best regards,
Mike

Hi,
Glad to hear, the one testimonial entry that has a different font size is in some extra div’s, please check this one and adjust to how the others are.

Best regards,
Mike

Hi,
What do you mean by “fix the height for mobile screens too” for mobile the script works correctly, it finds the tallest inner content and then sets all of the sliders to the same height. The problem I see is that one of your testimonials is very long so all of them will be. I recommend making the testimonials shorter or having a second testimonial for mobile only with all short comments.
You can also try this css that removes the padding for mobile and reduces the font size.

@media only screen and (max-width: 767px) { 
	.avia-testimonial {
		padding: 0px !important;
	}
	#top .av-large-testimonial-slider .avia-testimonial-content {
    font-size: 1em !important;
}
#top .av-large-testimonial-slider .avia-testimonial-meta .avia-testimonial-image {
    margin: auto !important;
}
}

Best regards,
Mike

Hi,
For the large desktop testimonial slider set the element visibility to hidden on small screens

For the small mobile testimonial slider set the element visibility to hidden on large screens

Best regards,
Mike

Hi,
@Andreas thank you for the links and login, I found that on your [DE] stagging site the jQuery Migrate theme setting was off, while on the [EN] site it was on.
This was giving the error: Uncaught TypeError: e.indexOf is not a function it seems that jQuery Migrate is needed.
I corrected this and it seems to work now, please clear your browser cache and check.

Best regards,
Mike

Hi,
Glad we could help, and thank you for using Enfold and for your patience.
As this thread was started in 2016, I will be closing this thread now.
For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

Best regards,
Mike