Having an issue with Flexslider that only shows up when testing on a mobile browser like Safari Mobile.
The <li> containers are all matching the height of the tallest one, even if there isn't enough content to justify equal heights.
Not sure how to capture a screenshot since it works fine on desktop but not on mobile. Check out this fiddle where it behaves as expected on my desktop browser, resizing based on content amount:
Here is the HTML code:
<div class="flexslider">
<ul class="slides">
<li>
<img src="http://i.imgur.com/YSVlz2Z.jpg" />
<h2><a href"#">First Link Here</a></h2>
<p>Some text here that could be a message</p>
<a href="#" data-role="button" data-icon="arrow-r" data-iconpos="right">Another Link Here</a>
</li>
<li>
<img src="http://i.imgur.com/YSVlz2Z.jpg" />
<h2><a href"#">Second Link Here</a></h2>
<p>Some text here that could be a message</p>
</li>
<li>
<img src="http://i.imgur.com/YSVlz2Z.jpg" />
<h2><a href"#">Third Link Here</a></h2>
<p>Some text here that could be a message</p>
</li>
</ul>
</div>
And here's the JS for flexslider:
$('.flexslider').flexslider();