Wordpress testimonial slider and it's link with footer

Question

I am creating a Wordpress website for one client.

On the home page, I added testimonials, when testimonials slider works, footer below also re-sized (up and down). I want to know how can I fix this thing? I don't want the footer to move when client slider moves.

Answer 1

I think you should calc the min-height dynamically via jQuery

  jQuery(document).ready(function($) {

        $(window).resize(function () {

        var minHeight = -1;
        $('.home-testimonial .slides > li').each(function() {
          minHeight = minHeight > $(this).height() ? minHeight : $(this).height();
        });
        minHeight+=300;
        $('.home-testimonial').css('min-height', minHeight+'px');

        });
   }); 

this will see the longest testimonial you have and put the main height of the container based to it so it will work if you have very long testimonial or on mobile

Answer 2

This is not really a WordPress question, is more of a CSS question.

As the testimonials transition, the content below (in this case the footer) is following it up / down.

In order to prevent this, you need to add some CSS that will add a min-height to the testimonial container.

The following CSS will work with the length of testimonials you have now . If your testimonials get longer, then the number will have to be increased:

.home-testimonial {
    min-height: 625px;
}

You can add this to your theme's stylesheet, or any custom styles areas they allow you to set up.