make all slides the same height as tallest

Yes, I thing I get what you’re asking.

You need to make us of the “Min Height” setting (under “Slide Style” in the right-hand sidebar). So here if you use the “%” setting, you can specify that your slides should have have a minimum height as a percentage of the width of your slides.

So if you set this to “100%”, your slides will be square (height equals width). Bear in mind this is a “minimum height” setting, so if your slide content exceeds the required minimum height, you will still get the jagged-bottom that you are talking about.

But play around with this setting…

That works with the slideshow I’m creating. Thanks!

Thank you for this! I did not notice this setting. The sliders are all now the same size on mobile which left me wondering why min-height 100% isn’t the default setting. However, when I go back to full screen the images are huge!
So maybe I’ll put things back to 50%… It seems the real problem I am having is that the static content <i>inside</i> the slider is forcing only that slide to be taller. Slides with extra content tend to get much taller on mobile with default settings. Any ideas how to fix this?

• This reply was modified 6 years ago by tikitorcher. Reason: Didn't work like I thought it did :P

Alright, more playing with this and I think I have identified my problems and here is what I come up with for a workaround.
Problems:
1. My image was added in the wysiwyg and had fixed height and width. If its container was smaller than this width, it would default to width=100% which ends up being rather large on mobile.
2. The larger size of my taller image and text made one of my slides taller than all of the other slides. This is a problem because all of the other slides have heights based off of <i>% of width</i>, not actual height any content. So all of the other slides are too short! ??

Workaround:
1. In wysiwyg editor, reduce the fallback size of my image with CSS. This reduces exaggerated image size which already helps on small screens. Large screens still used the specified width.
style="width: 80%;"
2. For smaller viewports, override that min-height=50% of width rule. Other options currently provided in the plugin include setting height based on ratio to the height or hardcoding a px value. On a small viewport, I found that care less about proportions and more about having my boxes tall enough to fit the tallest content. So, I added the following CSS so that the min-height set by the plugin is ignored on smaller viewports. It is unfortunately still hard coding of heights without measuring actual content, but looks good with my curren content:

@media only screen and (max-width: 415px) {
    #saslider .sa_hover_container{
        box-sizing: content-box;
        min-height: 200px !important; /*Had to use important since plugin applies min-height directly to the container rather than through classes.*/
    }
}

Proposal/Question:
How difficult would it be to add a min-height options that is based on content height rather than just a fixed-proportion-of-width or fixed number of pixels? Thoughts?

Side note:
The Slider looks very odd when viewed in ‘iPad’ mode in the chrome devtools. Not sure what that is about but it might be related. ??