Клавиатура в мобильном Chrome портит работу с CSS

#html #css #google-chrome #mobile #responsive-design

#HTML #css #google-chrome #Мобильный #адаптивный дизайн

Вопрос:

Я обнаружил, что мой проект на www.tiny.cc/cloudservice возникает одна проблема на странице входа в систему, когда я использую мобильную версию Chrome. В тот момент, когда появляется клавиатура, текст кнопки ведет себя неправильно:

Вы знаете, как это можно изменить с помощью CSS? В настоящее время это выглядит следующим образом:

 .buttonMain {
    width: 60%;
    height: 50%;
    margin-top: 2%;
    padding: 3% 0% 3% 0%;
    border-radius: 40px 40px 40px 40px;
    font-family: $fontMain;
    background-color: $buttonColor;
    font-size: 2em;
    font-weight: bold;
}

Спасибо за любые подсказки!

Ответ №1:

Измените этот CSS, удалите Height

 .buttonMain {
    /*height: 50%;*/ /*Remove This*/
    margin: 2% 0; /*Edit this*/
    padding: 3% 0;
    border-radius: 40px 40px 40px 40px;
    background-color: #d3dbfe;
    font-size: 2em;
}

Ответ №2:

ваш текст на кнопке всегда будет расположен идеально, если вы добавите эти правила, которые я отметил:

 .buttonMain {
    display: flex; /*add this it*/
    justify-content: center; /*add this it*/
    align-items: center; /*add this it*/
    height: 50%;
    margin-top: 2%;
    padding: 3% 0;
    border-radius: 40px 40px 40px 40px;
    background-color: #d3dbfe;
    font-size: 2em;
}