Viewing 8 posts - 31 through 38 (of 38 total)
  • Author
    Posts
  • #1213540

    I have the same issue with the testimonial slider height changing with the varying testimonial lengths.
    I have tried a few custom CSS mentioned in other threads here but none of them worked.
    I have attached the link where the slider is for you to assist me.

    #1213549

    Hi,
    Thanks for the link, the following script looks for each testimonial slider and finds the tallest inner content and then sets all of the sliders to the same height. Try adding this code to the end of your functions.php file in Appearance > Editor:

    function custom_testimonial_height_script(){
      ?>
      <script>
    (function($){
      $(window).load(function(){
      	$('.avia-testimonial-row').each(function(){  
         var $columns = $('.avia-testimonial_inner',this);
         var maxHeight = Math.max.apply(Math, $columns.map(function(){
             return $(this).height();
         }).get());
         $columns.height(maxHeight);
    });
      });
      })(jQuery);
      </script>
    <?php
    }
    add_action('wp_footer', 'custom_testimonial_height_script');

    This code sets the height of .avia-testimonial_inner which keeps the testimonial author title close to the content, this screenshot highlights the area.
    2020-05-16_065932.png
    If you replace .avia-testimonial_inner with .avia-testimonial-content in the code then the testimonial author title will stay in the same place for each slider, this screenshot highlights the area.
    2020-05-16_071109.png
    This script will work across your whole site, you can always restrict this to the one page by adding the page ID #top.page-id-5666 to the beginning of .avia-testimonial-row with a space like this:
    #top.page-id-5666 .avia-testimonial-row
    Please clear your browser cache and check after adding this code.

    Best regards,
    Mike

    #1213786

    Thank you very much Mike.
    It worked just fine. The height variations have stopped and I have a fixed height testimonial slider.

    Furthermore, the text size of the testimonials are varying.
    Could we please ensure that the text size is standard for all testimonial entries?

    Thank you!

    #1213795

    Hi,
    Glad to hear, the one testimonial entry that has a different font size is in some extra div’s, please check this one and adjust to how the others are.

    Best regards,
    Mike

    #1213803

    Alright Mike.

    Further to the testimonial slider –
    1) How can I fix the height for mobile screens too?
    2) how can i adjust the font size of the testimonials in the testimonial slider only for mobile screens? Because currently the testimonials look gigantic on phone.

    Thanks!

    #1213854

    Hi,
    What do you mean by “fix the height for mobile screens too” for mobile the script works correctly, it finds the tallest inner content and then sets all of the sliders to the same height. The problem I see is that one of your testimonials is very long so all of them will be. I recommend making the testimonials shorter or having a second testimonial for mobile only with all short comments.
    You can also try this css that removes the padding for mobile and reduces the font size.

    @media only screen and (max-width: 767px) { 
    	.avia-testimonial {
    		padding: 0px !important;
    	}
    	#top .av-large-testimonial-slider .avia-testimonial-content {
        font-size: 1em !important;
    }
    #top .av-large-testimonial-slider .avia-testimonial-meta .avia-testimonial-image {
        margin: auto !important;
    }
    }

    Best regards,
    Mike

    #1213938

    Hi Mike, the slider section is working fine now. Perhaps I hadn’t refreshed the webpage on my phone and hence the misinformation.
    I will try the above CSS to reduce font size on the mobile.

    Plus, how do you create a ‘second testimonial slider’ with only shorter testimonials for mobile screens?

    Thank you.

    #1213976

    Hi,
    For the large desktop testimonial slider set the element visibility to hidden on small screens
    2020-05-18_045413.png
    For the small mobile testimonial slider set the element visibility to hidden on large screens
    2020-05-18_045524.png

    Best regards,
    Mike

Viewing 8 posts - 31 through 38 (of 38 total)

You must be logged in to reply to this topic.