title: Resize Foundation's Orbit Slider
body: <p>Good Morning!</p>
  
  <p>I'm working on a prototype and I would like to know the "proper" way to change the width of Foundation's Orbit Slider yet still keep it's responsiveness.</p>
  
  <p>Currently - I had changed the width of the slider container to a smaller percentage (73%) - but when viewed at mobile size, it just doesn't seem quite right. Not to mention the arrows have floated upwards and I'd rather not hack some css to get them positioned correctly.</p>
  
  <p>Orbit CSS: <a href="http://naivestudio.net/win-prototype/prototype/orbit.php" rel="nofollow">http://naivestudio.net/win-prototype/prototype/orbit.php</a> (put on separate page just for this question - changes will be made in the app.css file)</p>
  
  <p>HTML in Index Page - Note the video is outside of the slider, but I will have it floated next to it in the header container.</p>
  
  <pre><code>&lt;div id="headcontain" class="row"&gt;
      &lt;div id="featured"&gt;
      &lt;img src="http://placehold.it/700x300&amp;text=Slide1"&gt;
      &lt;img src="http://placehold.it/700x300&amp;text=Slide2"&gt;
      &lt;img src="http://placehold.it/700x300&amp;text=Slide3"&gt;
      &lt;img src="http://placehold.it/700x300&amp;text=Slide4"&gt;
      &lt;img src="http://placehold.it/700x300&amp;text=Slide5"&gt;
      &lt;/div&gt;
  &lt;img src="http://placehold.it/235x300&amp;text=Video"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>&lt;!-- Include Orbit --&gt;
  &lt;script src="foundation/javascripts/jquery.foundation.orbit.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
     window).load(function() {
     $("#featured").orbit( { 
     timer: false
     });
  });
  &lt;/script&gt; 
  </code></pre>