How to make Home Slider (Flexslider) change height of slides responsively in iOS

[insightgraphics]

I set the same height on all my slides for large viewports, but on the smallest size, max-width 480, which applies to iOS iPhone held vertically, I want each slide to adapt their height to the content. I want the slider to resize for each slide — tall for tall slides and short for short slides.

Using @media (max-width: 480px) { } I reset the slides-wrapper to height: auto, and this works great on all desktop browsers when I narrow the browser window below 480px, but it does not work on iOS at the small size of an iPhone held vertically. Unlike desktop browsers, iOS seems to calculate the height for the first, tallest slide, then display all the shorter slides in that same tall space, leaving a big empty space below their content. I tried fiddling with other css to try to make iOS Safari recalculate the heights for individual slides, but I can’t figure it out.

Please see this on my test site, and view it on an iPhone, held vertically. Then see how it’s supposed to behave by viewing on any desktop browser with the window narrowed below 480px:
http://insightgraphicdesign.net/test/olmstead_160601

It’s fine when the iPhone is horizontal because I set the same height on all the slides. It’s just the vertical orientation where I want the slides to change height to suit their inner content — i.e., @media (max-width: 480px).

Topic

[Jason Bobich]

Hi,

Apologies, but honestly, I’m just not sure. I think it’s a quirk with how flexslider works on mobile vs desktop. I would imagine this is why the theme gives the slides a fixed height on mobile devices in the theme’s CSS.

[Author]

Replies