title: iPhone is adding a top margin to image
body: <p>When checking my responsive site on my laptop it's scaling nicely using percentages, but when I check it on my iPhone it adds a huge top margin to my vertical row of images. Any ideas why? The site is here <a href="http://edharrisondesign.com/pocketpictograms/" rel="nofollow">http://edharrisondesign.com/pocketpictograms/</a></p>
  
  <p>Thanks in advance!</p>
  
  <p>The HTML:</p>
  
  <pre><code>    &lt;!-- Pocket
  ================================================== --&gt;
  
      &lt;figure&gt;
          &lt;div class="main-pocket"&gt;&lt;img src="images/assets/pocket.png"&gt;&lt;/div&gt;
          &lt;div class="padding"&gt;&lt;/div&gt;
      &lt;/figure&gt;
  
  &lt;!-- Icons
  ================================================== --&gt;
  
      &lt;div class="inside-pocket"&gt;
          &lt;div class="icon-container"&gt;
              &lt;img class="pictogram" src="images/pocket-pics/pencil.png"&gt; 
              &lt;img class="pictogram" src="images/pocket-pics/iphone.png"&gt; 
              &lt;img class="pictogram" src="images/pocket-pics/earphones.png"&gt;  
              &lt;img class="pictogram" src="images/pocket-pics/camera.png"&gt; 
              &lt;img class="pictogram" src="images/pocket-pics/film.png"&gt;   
              &lt;img class="pictogram" src="images/pocket-pics/scalpol.png"&gt;    
              &lt;img class="pictogram" src="images/pocket-pics/paintbrush.png"&gt; 
              &lt;img class="pictogram" src="images/pocket-pics/fineliner1.png"&gt; 
              &lt;img class="pictogram" src="images/pocket-pics/fineliner2.png"&gt; 
              &lt;img class="pictogram" src="images/pocket-pics/notepad.png"&gt;    
              &lt;img class="pictogram" src="images/pocket-pics/mouse.png"&gt;  
              &lt;img class="pictogram" src="images/pocket-pics/glasses.png"&gt;    
              &lt;img class="pictogram" src="images/pocket-pics/lighter.png"&gt;    
              &lt;img class="pictogram" src="images/pocket-pics/pipe.png"&gt;   
              &lt;img class="pictogram" src="images/pocket-pics/flask.png"&gt;  
              &lt;img class="pictogram" src="images/pocket-pics/matches.png"&gt;    
              &lt;img class="pictogram" src="images/pocket-pics/watch.png"&gt;  
              &lt;img class="pictogram" src="images/pocket-pics/pocket-watch.png"&gt;   
              &lt;img class="pictogram" src="images/pocket-pics/key.png"&gt;    
              &lt;img class="pictogram" src="images/pocket-pics/car-key.png"&gt;    
          &lt;/div&gt;             
      &lt;/div&gt;
  </code></pre>
  
  <p>The CSS:</p>
  
  <pre><code>figure {
      z-index: 97;
      position: fixed;
      overflow: hidden;
      width: 100%;
      height: 100%;
      top: 40%;
      text-align: center;
  }  
  
  .padding {
    z-index: 95;
    position:  relative;
    background-color: #D2D2D2;
    height: 100%;
    width: 100%;
    top: -50px;
    overflow: hidden;
    border-bottom: 50px solid #D2D2D2;
  }    
  
  .main-pocket img {
     z-index: 96;
     position: relative;
     width: 30%;
     height: auto;
     margin: 0 auto;
     max-width: 300px;
  } 
  
   .inside-pocket {
     width: 100%;
     height: 100%;
     position: absolute;
     margin: 0 auto;
     text-align: center;
   }
  
   .icon-container {
      position: relative;
      max-width: 300px;
      width: 30%;
      top: 37%;
      margin: 0 auto;
  }
  
  .pictogram {
      height: auto;
      width: 100%;
      margin-bottom: 200%;
  }
  </code></pre>