Fixed Height Testimonials

[Ezoller]

#504268

Is there an easy way to enable fixed height for testimonials section to keep it from pushing content up and down below that section on a page?

[sean.oh]

#537751

Sorry, it’s not for your answer.

Did you figure it out? I need the fixed height too.

[rsotc]

#540904

+1. Please let me know if anyone has figured it out. Thx.

[brandonfiredesign]

#543028

I also would like to know about this…have wanted to know for years. Hoping someone responds…

Thank you for any help!

[brandonfiredesign]

#543397

Heard from support and this is basically what they said:

Thanks for getting in touch with us.

I have made a video to explain how this can be done, Video here —–> http://bit.ly/2TCHuyM

I’m sure the video link will get outdated eventually but here’s the quick and dirty details:

The following custom CSS was used, however, I had to use a 3rd party Custom CSS plugin rather than the Avada Theme Options Custom CSS for some reason…

.fixtest {
min-height: 270px;
}

“fixtest” was added as a CSS Class to the testimonials Element.

[PieroPec]

#637950

Maybe it is already solved, but an elegant way to do it is to insert a small code directly on the Fusion Builder Bar in the page where the Testimonials are (click on the </> ):
Just write something like this:

.review blockquote q {
min-height: 150px !important;
}

where the 150 is, for example, the min height of the testimonial box.
No other code is needed.

[Ezoller]

#673463

That worked! Thanks PieroPec!

[troels]

#864151

I used this and it works for the desktop view.

It didn’t work for the mobile view / small screens, though.

Is there any additional code I can add to the CSS code that also creates a fixed height of the testimonial section for mobile displays?

Thanks in advance.
/ Troels

[mammalalien]

#868248

I’m not a fan of specifying a fixed height so here’s a way to fight Javascript with Javascript and dynamically assign the height of the tallest testimonial on page load or resize:

Javascript (with help from https://stackoverflow.com/questions/6781031/use-jquery-css-to-find-the-tallest-of-all-elements):

//This is a wrapper to make jQuery work nicely with WordPress.
jQuery(document).ready(function($) {
 	
	//Establish the function
	function fixedTestimonialHeight() {
	
		//Setup variable
		var heighestReview = -1;
		
		//Find the height of the highest .review
		$('#wrapper .fusion-testimonials .review').each(function( index ) {
			 heighestReview = heighestReview > $(this).height() ? heighestReview : $(this).height();
		});
		
		//Override height of .reviews
		$('#wrapper .fusion-testimonials .reviews').each(function() {
			$(this).height(heighestReview);
			$(this).css("max-height", heighestReview);
			$(this).css("min-height", heighestReview);
		});
	}
	
	//Run on load
	fixedTestimonialHeight();
	
	$( window ).resize(function() {
		//Run on resize
		fixedTestimonialHeight();
	});
	
});

And some CSS if you want to vertically centre all of the testimonials:

#wrapper .fusion-testimonials .reviews {
	display: flex;
	justify-content: center;
	align-items: center;
}

It would be really great if there was an option to simply disable automatic resizing and use the height of the tallest element.

[koppit]

#868615

KUDOS to this code snippet, very much appreciated. Just dumped it into a code block and wrapped in <script> tags and it worked like a charm.

[marklchaves]

#868624

Hey @mammalalien,

Cool. Thanks for sharing that jQuery code.

I’ve been able to get away with throwing a flex: 1 (CSS 1-liner) to force equal heights. But, that doesn’t work for the testimonials for some reason.

So, your solution is great.

I noticed that the code could use some updating since the original post (OP) was about 9 years ago.

Here’s a minimalist and (hopefully) a more up-to-date version if anyone’s interested.

jQuery(document).ready(function ($) {
  function makeEqualHeights() {
    let maxHeight = Math.max(...
      $(".review").map(function () {
        return $(this).height();
      })
    );

    // Make the parent and children heights the same.
    $(".reviews").height(maxHeight);
    $(".review").height(maxHeight);
  }

  window.onload = makeEqualHeights;
  window.onresize = makeEqualHeights;
});

A couple of the enhancements are: 1) no loops where the original has 2 loops, 2) no condition logic, and 3) I use the newer spread operator (...) to avoid using the .apply call that I saw in the OP.

Here’s a short clip of it working on my test env.

https://youtu.be/AWuSbAhAEhA

Cheers! 🙂

[Bronze Digitals]

#874157

update is fantastic. can you please guide for the css as it’s not centered

[patskot]

#876480

Thank you for the elegant solution. Exactly what I was looking for.

[wojciechbcn]

#877240

Hi,

Where should I put this JQuery code? Is it still working with the latest version?

[marklchaves]

#877332

Hey @wojciechbcn,

Try adding the jQuery snippet using your Avada Global Options > Advanced > Code Fields > Space before </body>

https://theme-fusion.com/wp-content/uploads/2022/04/docs_7.7_global_options_25_advanced_code_fields.jpg

Be sure you wrap the snippet with <script></script> tags.

This doc lists other ways if you need them.

https://docs.wppopupmaker.com/article/84-getting-started-with-custom-js

Cheers!

[Author]

Posts