title: Foundation Orbit slider with responsive design
body: <p>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).</p>
  
  <p>When I decrease the size of the browser window it all fits except that the height of the slider.</p>
  
  <p>What we need is to make the slider higher when on a small browser (it needs to be the same slider - not an alternative).</p>
  
  <p>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.</p>
  
  <p>How do I achieve that?</p>
  
  <p>The following is my slider HTML code:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="row"&gt;
    &lt;div class="twelve columns"&gt;
      &lt;div id="slider"&gt;
          &lt;!-- *** This is the slider that needs to fit smaller browsers ***--&gt;
          &lt;div class="row" style="background-color:White;"&gt;
              &lt;div class="six columns"&gt;
                  &lt;h2&gt;Title&lt;/h2&gt;
                  &lt;div class="summary"&gt;
                      This is the summary is the summary is the summary is the summary is the summary is the summary is the summary.
                      &lt;a href="javascript:void(0);"&gt;Learn more&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="some-thumbnails"&gt;
                      &lt;img src="http://placehold.it/100x100&amp;text=[thumbnail]" /&gt;
                      &lt;img src="http://placehold.it/100x100&amp;text=[thumbnail]" /&gt;
                      &lt;img src="http://placehold.it/100x100&amp;text=[thumbnail]" /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="six columns"&gt;
                  &lt;img src="http://placehold.it/550x250&amp;text=[img 1]" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;img src="http://placehold.it/1000x400&amp;text=[img 1]" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;hr /&gt;
  </code></pre>
  
  <p></p>