Testimonial “bouncing”

Hey mjrielly,
Typically the solution is to apply css height so all of the testimony slides will have the same height, and also calculate the needed height for each screen size. The following javascript will do this automatically for you. Add the following code to your child theme functions.php file. If you are not using a child theme you could use the WP Code plugin then add a new snippet, in the top right corner use the PHP snippet as the code type:

then add the following code and save.

function equalise_testimonial_heights() { ?>
  <script>
(function () {

  function equaliseTestimonialHeights() {

    const row = document.querySelector('.avia-testimonial-row');
    if (!row) return;

    const slides = row.querySelectorAll('.avia-testimonial');
    if (!slides.length) return;

    slides.forEach(function (slide) {
      slide.style.height = '';
    });

    let maxHeight = 0;
    slides.forEach(function (slide) {
      const h = slide.offsetHeight;
      if (h > maxHeight) maxHeight = h;
    });

    slides.forEach(function (slide) {
      slide.style.height = maxHeight + 'px';
    });
  }

  function debounce(fn, delay) {
    let timer;
    return function () {
      clearTimeout(timer);
      timer = setTimeout(fn, delay);
    };
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', equaliseTestimonialHeights);
  } else {
    equaliseTestimonialHeights();
  }

  window.addEventListener('resize', debounce(equaliseTestimonialHeights, 150));

})();
</script>
  <?php
}
add_action( 'wp_footer', 'equalise_testimonial_heights', 99 );

Best regards,
Mike

Hi,

Glad we could be of help! Please feel free to open another thread if you have more questions.

Have a nice day.

Best regards,
Ismael