title: How do i left align an image in desktop view and center it in mobile view?
body: <p>I have a site: <a href="http://www.mammothnewyork.com/" rel="nofollow">http://www.mammothnewyork.com/</a> which is mostly made up of galleries.</p>
  
  <p>I have some images that are in portrait format, (for example if you scroll down to the "Andela" gallery). </p>
  
  <p><strong>On Desktop:</strong></p>
  
  <p>I want them to be left-aligned on desktop. i.e. have an image on the left and black on the right. You can take a look at the "Andela" section as it appears on my test server here <a href="http://45.55.217.186/" rel="nofollow">http://45.55.217.186/</a> . However, this approach gets messed up on mobile.</p>
  
  <p><strong>On Mobile:</strong></p>
  
  <p>I want them to be centered. Like on the current site, <a href="http://www.mammothnewyork.com/" rel="nofollow">http://www.mammothnewyork.com/</a>. However, this approach does not left-align them on desktop.</p>
  
  <p>The images on both the sites mentioned above have been placed on a black by me in Photoshop manually to demonstrate what I am asking. Otherwise the original image itself would just be the without the black background.</p>
  
  <p>I have tinkered around with:
  <code>background: url(img/andela/Andela-01.jpg) no-repeat center center;</code>
  to use <code>no-repeat left center</code> but it does not fix my problem for both desktop and mobile.</p>
  
  <p>My current CSS for the Flexbox slider for Andela and that image is:</p>
  
  
  
  <pre><code>    &lt;section id="andela" class="gallery section wait"&gt;
  
          &lt;div class="container"&gt;
              &lt;h2 class="title lighttext"&gt;Andela&lt;/h2&gt;
          &lt;/div&gt;
  
          &lt;div id="galleryandela" class="slides-wrap fill"&gt;
              &lt;div class="slides"&gt;
  
                  &lt;div class="slide"&gt;
                      &lt;span class="img" style="background: url(img/andela/Andela-01.jpg) no-repeat center center; background-size: cover;"&gt;&lt;/span&gt;
                      &lt;p class="lighttext"  style="top:4%;"&gt;&lt;/p&gt; 
                  &lt;/div&gt;
  
                  ....
                  ....
                  .... &lt;!-- TRUNCATED HTML FOR OTHER DIVS  --&gt; 
                  ....
                  ....
  
                  &lt;!-- slide last --&gt;
                  &lt;div class="slide last"&gt;
                      &lt;span class="img" style="background: url(img/andela/Andela-20.jpg) no-repeat center center; background-size: cover;"&gt;&lt;/span&gt;
                      &lt;!-- &lt;p class="addbg"  style="top:72%;"&gt;&lt;/p&gt; --&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;
  
              &lt;nav class="pager"&gt;
              &lt;/nav&gt;
  
              &lt;!-- &lt;p class="pager-txt"&gt;Explore more using the boxes above or the arrows&amp;nbsp;below.&lt;/p&gt; --&gt;
  
          &lt;/div&gt;
  
      &lt;/section&gt;
  </code></pre>