Мобильный браузер отключает нижнюю часть контента, но работает в обозревателе рабочего стола

Question

Нижняя часть экрана становится видимой в мобильном режиме, но отлично в браузере, даже когда она изменяется. Я думал, что, возможно, медиа-запросы не рассматриваются, но они выглядят прекрасно. Я попытался переместить .square, поставив top:-55%;, но он будет перемещаться только в браузере рабочего стола. По какой-то причине он не двигается по мобильному телефону.

 <meta name="viewport" content="initial-scale=1"> 

    /* Iphone */ 

    @media (min-width: 300px) and (max-width: 767px) { 
     .project_miniwrap { 
      min-width: 90%; 
      top: 33%; 
     } 
     #tu { 
      margin-top: 117px; 
      margin-left: 235px 
     } 
     #dar { 
      margin-top: 17px; 
      margin-left: 25px 
     } 
     .square { 
      color: #0D0D0D; 
      font-family: 'NimbusSansNo5TOT-Medium'; 
      font-size: 38px; 
      letter-spacing: -1px; 
      display: block; 
      margin: auto; 
      position: absolute; 
      top: -15%; 
      left: 0; 
      bottom: 0; 
      right: 0; 
      width: 295px; 
      height: 160px 
     } 
     .l1, 
     .l2, 
     .l3, 
     .l4 { 
      position: absolute; 
      background: transparent; 
      width: 0px; 
      height: 0px; 
      background-color: black; 
      color: #0D0D0D 
     } 
     .l1 { 
      left: 0; 
      bottom: 0; 
      width: 8px 
     } 
     .l2 { 
      top: 0; 
      left: 0; 
      height: 8px 
     } 
     .l3 { 
      right: 0; 
      top: 0; 
      width: 8px 
     } 
     .l4 { 
      bottom: 0; 
      right: 0; 
      height: 8px 
     } 
     .description { 
      width: 90% 
     } 
     .snippet { 
      display: block; 
      width: 100%; 
      line-height: 45px; 
      margin-bottom: 10%; 
      font-size: 36px 
     } 
     .main_description { 
      display: block; 
      width: 100% 
     } 
     #anchor-point { 
      bottom: 90%; 
      position: absolute 
     } 
     .anchor-point { 
      bottom: 90%; 
      position: absolute 
     } 
     #container { 
      top: 30% 
     } 
    } 
    @media (max-height: 479px) { 
     #tu { 
      margin-top: 117px; 
      margin-left: 235px 
     } 
     #dar { 
      margin-top: 17px; 
      margin-left: 25px 
     } 
     .square { 
      color: #0D0D0D; 
      font-family: 'NimbusSansNo5TOT-Medium'; 
      font-size: 38px; 
      letter-spacing: -1px; 
      display: block; 
      margin: auto; 
      position: absolute; 
      top: -15%; 
      left: 0; 
      bottom: 0; 
      right: 0; 
      width: 295px; 
      height: 160px 
     } 
     .l1, 
     .l2, 
     .l3, 
     .l4 { 
      position: absolute; 
      background: transparent; 
      width: 0px; 
      height: 0px; 
      background-color: black; 
      color: #0D0D0D 
     } 
     .l1 { 
      left: 0; 
      bottom: 0; 
      width: 8px 
     } 
     .l2 { 
      top: 0; 
      left: 0; 
      height: 8px 
     } 
     .l3 { 
      right: 0; 
      top: 0; 
      width: 8px 
     } 
     .l4 { 
      bottom: 0; 
      right: 0; 
      height: 8px 
     } 
    } 

Сайт: http://imdarrien.com/

Answer 1

Я думаю, что это отрезают, так как высота окна просмотра не является достаточно большим. Поскольку вы позиционируете .project_miniwrap с использованием top:35%;, он всегда будет позиционировать его на 35% от вершины родителя, а не в центре.

Попробуйте использовать это для центрирования в DIV вместо:

.project_miniwrap { 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%,-50%); 
} 

Это более совместимая версия выше, что вы можете использовать, если вы знаете, ширину и высоту, в противном случае вам нужно будет отцентрировать его с помощью JavaScript.

.project_miniwrap { 
    top: 50%; 
    left: 50%; 
    width: 200px; 
    height: 300px; 
    margin-left: -100px; 
    margin-right: -150px; 
}