title: Foundation 6.4: Image Orbit Display Problems
body: <p>I’m a UX researcher, not a coder and I was hoping for some helpful feedback to make the orbit function work. : </p>
  
  <p><strong>Using:</strong> Foundation 6.4
  <strong>Function:</strong> Image Orbiter</p>
  
  <p><strong>Problems:</strong> 
  Placing 800 w x 400 h images that I’ve created (via Photoshop), they seem to not “fill” the container the orbiter is providing. The images go to the upper left hand portion of the orbit container and the arrows  and bullets look misaligned. </p>
  
  <pre><code>&lt;div class="orbit" role="region" data-orbit data-auto-play="false"&gt;
    &lt;div class="orbit-wrapper"&gt;
     &lt;div class="orbit-controls"&gt;
       &lt;button class="orbit-previous"&gt;&lt;span class="show-for-sr"&gt;Previous 
        Slide&lt;/span&gt;&amp;#9664;&amp;#xFE0E;&lt;/button&gt;
       &lt;button class="orbit-next"&gt;&lt;span class="show-for-sr"&gt;Next 
       Slide&lt;/span&gt;&amp;#9654;&amp;#xFE0E;&lt;/button&gt;
     &lt;/div&gt;
  
   &lt;ul class="orbit-container"&gt;
     &lt;li class="is-active orbit-slide"&gt;
      &lt;img class="orbit-image" src="img/Dtotals.png" alt="Totals"&gt;
     &lt;/li&gt;
     &lt;li class="orbit-slide"&gt;
      &lt;img class="orbit-image" src="img/trans.png" alt="Transcripts"&gt;
     &lt;/li&gt;
    &lt;/ul&gt;
   &lt;/div&gt;
  
   &lt;nav class="orbit-bullets"&gt;
     &lt;button class="is-active" data-slide="0"&gt;&lt;span class="show-for-sr"&gt;First 
      slide details.&lt;/span&gt;&lt;span class="show-for-sr"&gt;Current Slide&lt;/span&gt; 
     &lt;/button&gt;
     &lt;button data-slide="1"&gt;&lt;span class="show-for-sr"&gt;Second slide details. 
     &lt;/span&gt;&lt;/button&gt;
   &lt;/nav&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>How can I get the orbiter to better align to my 800w x 400h image size so that the bullets and arrow controls align appropriately?  </p>
  
  <p>Thank you so much!</p>