Controlling Height on Classic Slider

[MIsaacs]

I’m using the “Classic Slider” element for a testimonial slider at the top of my page. Some of the slides have different amounts of text, naturally, and the height of my classic slider shrinks or grows depending on how much text is there. I’ve tried adding padding to make each slide uniform in size regardless of the text, but it just seems to push the bottom down.

Do I need to wrap the slider in a content area and set it to a fixed height? I’d like for it to be responsive, should I use max-height and min-height to set it to a percentage of the viewport?

Staging site link is here: http://613.50a.myftpupload.com/

I have a username/password set up for third-party access if needed, but I’m thinking there’s got to be a simple fix to this - just one I can’t seem to think up!

Thanks for the help!

[ruenel]

Hello There,

Thanks for writing in!

To resolve your issue, you will have to se a minimum height for each of your slides. To do that, please edit your page back in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

.x-flexslider .x-slides .x-slide {
    min-height: 300px;
}

You can also add this if you want to set a different minimum height in smaller screens:

@media(max-width: 979px){
  .x-flexslider .x-slides .x-slide {
    min-height: 350px;
  }
}

We would loved to know if this has work for you. Thank you.

[MIsaacs]

Hi there, thanks for your response! Setting the min-heights equal worked on desktop, but on mobile the content still shifted. I just decided to embrace it as extra responsive

I altered your suggestion to relative units as such:

.x-flexslider .x-slides .x-slide {
min-height: 40vh;
}

I know I could set the box size to a specific minimum and make the text itself responsive for mobile, but I think I’d rather the box resize than the text.

Thanks for showing me the solution!

[ruenel]

You’re welcome!
We’re glad we were able to help you out.