问题

I have a flexslider slideshow with an image and a spot for featured text. On the full site it starts with the image to the left and the featured text area to the right (floated). Both of these items are in a containing div with a black background.

When the screen is shrunk down I have through media queries made the image go on top and the featured text area go below it and both are 100%. They are relative so content below it changes position based on the amount of text in the featured text area.

First example - tallest slide

The image below is an example of the rotator with the most text. As you can see the image takes up the top part and the green takes up the bottom. You don't even see the background of the container div because the contents fill up the whole container.

Second Example - shorter slide

This example shows what is happening on the iPhone. The other slides are somehow still affecting the height of the container. Matter of fact the links are still clickable in that gray area even though nothing is visible.

What could be causing this issue? It only happens on the iPhone not in the browser. On the browser the container resizes and the content shifts based on the height of the green area, but on IOS it takes the height of the largest slide in the rotator even though it's display: none. The container has a height of auto and is using overflow: hidden.

回答1:

I actually never found a solution to get flexslider working, so I switched to using the BXSlider which has an adaptiveHeight option.

http://bxslider.com

回答2:

To make this work in Flexslider, I had to set the height of the container in the 'after:' callback based on the height of the current 'active-flex-slide'.

Seems a bit of a hack to me though.

Might try BXslider for future projects...