Foundation Orbit slider with responsive design - responsive-design

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.
Learn more
</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.