iPhone добавляет верхний край изображения image

Question

При проверке моего отзывчивого сайта на моем ноутбуке он хорошо масштабируется с использованием процентов, но когда я проверяю его на своем iPhone, он добавляет огромный верхний край к моему вертикальному ряду изображений. Любые идеи почему? Сайт находится здесь http://edharrisondesign.com/pocketpictograms/

Заранее благодарен!

HTML-:

<!-- Pocket 
================================================== --> 

    <figure> 
     <div class="main-pocket"><img src="images/assets/pocket.png"></div> 
     <div class="padding"></div> 
    </figure> 

<!-- Icons 
================================================== --> 

    <div class="inside-pocket"> 
     <div class="icon-container"> 
      <img class="pictogram" src="images/pocket-pics/pencil.png"> 
      <img class="pictogram" src="images/pocket-pics/iphone.png"> 
      <img class="pictogram" src="images/pocket-pics/earphones.png"> 
      <img class="pictogram" src="images/pocket-pics/camera.png"> 
      <img class="pictogram" src="images/pocket-pics/film.png"> 
      <img class="pictogram" src="images/pocket-pics/scalpol.png">  
      <img class="pictogram" src="images/pocket-pics/paintbrush.png"> 
      <img class="pictogram" src="images/pocket-pics/fineliner1.png"> 
      <img class="pictogram" src="images/pocket-pics/fineliner2.png"> 
      <img class="pictogram" src="images/pocket-pics/notepad.png">  
      <img class="pictogram" src="images/pocket-pics/mouse.png"> 
      <img class="pictogram" src="images/pocket-pics/glasses.png">  
      <img class="pictogram" src="images/pocket-pics/lighter.png">  
      <img class="pictogram" src="images/pocket-pics/pipe.png"> 
      <img class="pictogram" src="images/pocket-pics/flask.png"> 
      <img class="pictogram" src="images/pocket-pics/matches.png">  
      <img class="pictogram" src="images/pocket-pics/watch.png"> 
      <img class="pictogram" src="images/pocket-pics/pocket-watch.png"> 
      <img class="pictogram" src="images/pocket-pics/key.png">  
      <img class="pictogram" src="images/pocket-pics/car-key.png">  
     </div>    
    </div> 

CSS-:

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%; 
} 

Answer 1

Хорошо, я знаю, куда я иду неправильно - я должен был установив верхний край к .inside-карманный классу, а не класс .icon-container. Разметка здесь:

/* #Pocket 
================================================== */ 
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%; 
top: 37%; 
position: absolute; 
margin: 0 auto; 
text-align: center; 
} 

.icon-container { 
position: relative; 
max-width: 300px; 
width: 30%; 
margin: 0 auto; 
} 

.pictogram { 
height: auto; 
width: 100%; 
margin-bottom: 200%; 
} 

Если кто-то может позволить мне знать ПОЧЕМУ это правильно было бы здорово! Cheers