Max Height the classic Slider

[claywebdev]

Hi there,

I’d like to limit the height of some of the classic sliders in the following portfolios so they stay within the height of a computer screen

Is there a way to set a max height of the slider / image that would do this?

https://www.philipclay.com/portfolio-item/river-and-rose-velvet-cushion/

In the meantime, I am smushing my images to limit them to a max of 800px
Thanks for your help

Chris

[rad]

Hi Chris,

Thanks for reaching out.

Sure, you could do that. Please add this CSS to your Theme Options > CSS.

.x-flexslider .x-slides img {
    max-width: calc(100vh - 400px);
}

That means 100% height of the screen minus 400px. The downside of changing your image size is also changing the width automatically. Hence, since your image is square, it will leave a space on the right. Forcing a square image to be a rectangle will only distort it unless you’ll upload them as rectangle initially.

Cheers!

[claywebdev]

@Rad

.x-flexslider .x-slides img {
max-width: calc(100vh - 400px);
}

Hi Rad,

Thanks for the update IT works like you say. Is there anyway I can force it center?

PS for now I have removed the CSS so that I do not have the white space

Thanks so much

Chris

[rad]

Hi Chris,

Sure, you can change it to this

@media ( min-width: 980px ) {
.x-flexslider .x-slides img {
    max-width: calc(100vh - 400px);
    margin: 0 auto;
}
}

Or to this

.x-flexslider .x-slides img {
    max-height: 45vh;
    width: auto;
    margin: 0 auto;
}

Hope this helps.

[claywebdev]

@Rad

.x-flexslider .x-slides img {
max-height: 45vh;
width: auto;
margin: 0 auto;
}

This is great thank you Rad. Awesome work

Chris

[paul.r]

On behalf of my colleague, you’re welcome. Cheers!