Отзывчивый режим на дисплее рабочего стола отличается от мобильного.

Question

У меня небольшая целевая страница, она по-прежнему нуждается в некоторой работе, но я застрял на задании высоты поля или высоты или вертикальной выверки.

Всякий раз, когда я пользуюсь браузером на рабочем столе (хром, firefox) в режиме отклика, он отображается нормально, но на мобильных устройствах (как сафари, так и firefox для andoroid) он ломается. Это как если бы текст выравнивался сверху на мобильном телефоне, но я не знаю, как его решить.

HTML

<section id="main-1"> 
<div class="container"> 
    <div id="claim"> 
     <h1>Bono de bienvenida</h1> 
     <p class="huge">300€</p> 
     <p>parajugar a casino</p> 
     <p class="smaller">con el código: experto</p> 
    </div> 
</div> 

SCSS

$proportion: 9vmin; 

#main-1 { 
    position: relative; 
    height: 600px; 
    max-height: 80vh; 
    min-height: 300px; 
    background-image: url('/dist/assets/img/img_768x1024.jpg'); 
    background-size: cover; 
    background-position: 50%; 

    .container { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    text-align: center; 
    } 

    #claim { 
    background-image: linear-gradient(to left, 
      rgba(0, 0, 0, 0), 
      rgba(0, 0, 0, 0.45) 15%, 
      rgba(0, 0, 0, 0.46) 85%, 
      rgba(0, 0, 0, 0) 100%); 
    font-size: $proportion * 12/12; 
    line-height: $proportion * 12/12; 
    text-transform: uppercase; 
    padding: 1rem 0; 
    margin-top: 0; 


    .huge { 
     font-size: $proportion * 55/12; 
     line-height: $proportion * 39/12; 
     margin-bottom: 0; 

    } 

    .smaller { 
     font-size: $proportion * 6/12; 
     text-transform: lowercase; 
     line-height: $proportion * 4/12; 
    } 

    } 
} 

Вы можете увидеть его вживую на http://bienvenida.casinobarcelona.es

То, что вы видите на рабочем столе с отзывчивым режиме

Что вы на самом деле видите на мобильном

Answer 1

Попробуйте использовать медиа-запросы для этого:

@media screen and (max-width: 544px) { 
#claim {line-height:2vw;} /* wanted line height etc */ 
.huge {line-height:2vw;} 
} 

Недо вы удовлетворены результатом