Avada › Forums › Community Forum › Fixed Height Testimonials
Tagged: testimonials, equal heights, jquery
-
AuthorPosts
-
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?
Sorry, it’s not for your answer.
Did you figure it out? I need the fixed height too.
+1. Please let me know if anyone has figured it out. Thx.
I also would like to know about this…have wanted to know for years. Hoping someone responds…
Thank you for any help!
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.
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.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.
/ TroelsI’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.
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.
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.
Cheers! 🙂
update is fantastic. can you please guide for the css as it’s not centered
Thank you for the elegant solution. Exactly what I was looking for.
Hi,
Where should I put this JQuery code? Is it still working with the latest version?
Hey @wojciechbcn,
Try adding the jQuery snippet using your Avada Global Options > Advanced > Code Fields > Space before
</body>
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!
-
AuthorPosts
- You must be logged in to reply to this topic.