Home Forums Community Forum Fixed Height Testimonials

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • Ezoller
    Participant
    Post count: 4

    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
    Participant
    Post count: 1

    Sorry, it’s not for your answer.

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

    rsotc
    Participant
    Post count: 2

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

    brandonfiredesign
    Participant
    Post count: 4

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

    Thank you for any help!

    brandonfiredesign
    Participant
    Post count: 4

    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
    Participant
    Post count: 10

    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
    Participant
    Post count: 4

    That worked! Thanks PieroPec!

    troels
    Participant
    Post count: 1

    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
    Participant
    Post count: 6

    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
    Participant
    Post count: 2

    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
    Participant
    Post count: 873

    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
    Participant
    Post count: 1

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

    patskot
    Participant
    Post count: 1

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

    wojciechbcn
    Participant
    Post count: 1

    Hi,

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

    marklchaves
    Participant
    Post count: 873

    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!

Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.