X-slide stop auto flex

Hello - How do you stop the x-slide from auto-sizing or flexing based on the content within the slide? For example; I am using slider to display testimonials. If slider-1 has less text then slide-2 the slide will shift up or down to fit accordingly. Would like a static size and not flex.

Thank you for your time.

Hi There,

Could you please provide us with the page link which you’re working?

Thanks.

Hi There,

Let’s try adding minimum height on the slider. On the class field of the slider, add slider-custom-height. Then add the following CSS:

  .slider-custom-height{
        min-height:300px; /*Adjust 300px to your desired height that will work for all slides*/
   }

The issue with that fixed is, it will not be responsive. On smaller screen, as the text adjust, it’s will need different height. Now we need to add media queries to take care of that too. Something like this:

  @media (max-width:980px){
      .slider-custom-height{
           min-height:400px;
      }
    }
  @media (max-width:767px){
      .slider-custom-height{
           min-height:500px; 
      }
    }
  @media (max-width:480px){
      .slider-custom-height{
           min-height:600px; 
      }
    }

That media queries will set minimum height on the slide per screen. Just adjust those height.

Hope this helps.

Perfect, thank you!

Glad we could help.

Cheers!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.