Testimonial Slider Height

  • Hi There,

    My testimonial slider isn’t tall enough to fit some of testimonals… I’ve tried playing around with CSS (I’m not an expert) but I couldn’t make it higher. Even the “bottom title” doesn’t show on those.

    the website I’m working on is at a subdomain – >> http://www.xande.site/renovare

    It’s in portuguese.

    I’m on the lite version of Integral.


    Hello there,

    Your testimonial slider works just fine for me. It should also work well with the text of each length.

    However, if you want to play with custom styling, please navigate to Appearance > Customize > Additional CSS and add code below (don’t forget to change 500px to your desired height.

    .testimonials .testislider{

    Piotr Bąk

    Thanks for your answer. But, how about on mobile? I think there’s a margin or padding around the testimonial which takes most of the width making the text looks pretty weird…

    How can I change that?


    I had a look at your website, I am not really sure what you mean.

    Can you be more specific? And maybe provide a screenshot?

    You can adjust certain styles for mobile by using media queries.

    They can be found at the bottom of the style.css file.

    Screen shot of Testimonial Slider

    On my slider there are 5 testimonials, and only one of them is short enough to fit in it. The rest of them gets chopped at the bottom, and there’s too much space left on its sides. It would look better if it took more of the screen on a mobile phone.

    PS: the image link is from my google drive, please right click on the broken link and chose open link in a new tab to see the image.


    Which version of Integral Lite are you using?

    I have tested on our development site and we are not experiencing the same issues as you.

    One small adjustment you can make is to adjust the padding for the blockquote’s in the testimonials section.

    On line 1626 of style.css file edit this,

    .testimonials blockquote {
    padding: 10px 20px;
    position: relative;
    border: 0;

    Change it to,

    .testimonials blockquote {
    padding: 0px;
    position: relative;
    border: 0;

    I was using version,I updated it now, and most of it was corrected.

    There was one testimonial that the signature didn’t fix it.

    The 4th testimonial is missing the signature on mobile. Whilst on desktop it shows.

    Website: http://www.renovarevita.com.br


    The reason for that is because there is a max-height of 700px set in the CSS files.

    That is so that it doesn’t go on forever if someone enters an extremely long testimonial.

    You can change this max-height by using the following CSS code,

    .testimonials .flex-viewport {
    max-height: none;

    Or increase the max-height,

    .testimonials .flex-viewport {
    max-height: 900px;

    You can enter this CSS code in the Custom CSS field located in Integral Options > Custom Code section.

    I hope that helps.

    Thanks for your answer…

    I’m still on the lite version, so I don’t have access to the > Custom Code section.

    Is there any other way to edit this?

    Otherwise I’ll have to rewrite the testimonial to fit.


    You can enter it in Appearance > Customize > Custom CSS field.

You must be logged in to reply to this topic.