Question

I have started using the Foundation 3 from zurb but my slider has slides with text on the left hand side and an image on the right (instead of just an image and a label on top of it).

When I decrease the size of the browser window it all fits except that the height of the slider.

What we need is to make the slider higher when on a small browser (it needs to be the same slider – not an alternative).

I know there’s the fluid option in fluid slider and I suspect that if I change it, it will be enough to solve this problem.

How do I achieve that?

The following is my slider HTML code:

<div class="row">
  <div class="twelve columns">
    <div id="slider">
        <!-- *** This is the slider that needs to fit smaller browsers ***-->
        <div class="row" style="background-color:White;">
            <div class="six columns">
                <h2>Title</h2>
                <div class="summary">
                    This is the summary is the summary is the summary is the summary is the summary is the summary is the summary.
                    <a href="javascript:void(0);">Learn more</a>
                </div>
                <div class="some-thumbnails">
                    <img src="http://placehold.it/100x100&text=[thumbnail]" />
                    <img src="http://placehold.it/100x100&text=[thumbnail]" />
                    <img src="http://placehold.it/100x100&text=[thumbnail]" />
                </div>
            </div>
            <div class="six columns">
                <img src="http://placehold.it/550x250&text=[img 1]" />
            </div>
        </div>
        <img src="http://placehold.it/1000x400&text=[img 1]" />
    </div>
</div>

<hr />

Answer 1

The orbit is controlled by an image generated by some plugin used by the orbit plugin. What I did was to change the plugin to get the height of the left and right part of the highest slide (when changed to phone view) and then set the data-src to “holder.js/[width]x[height]” and call the Holder.run() method.