CODEWITHSUNDEEP
htmlcssgoogle-chromemobileresponsive-design
JoseTurron
JoseTurron

Reputation: 243

Keyboard on mobile chrome messes with the CSS

I found that my project at www.tiny.cc/cloudservice has one issue on the login page when I use the mobile version of Chrome. The moment the keyboard appears, the button text behaves improperly:

enter image description here

Do you know how can it be changed via CSS? Currently it looks like this:

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

Thanks for any hints!

Upvotes: 1

Views: 207

Answers (2)

s.kuznetsov
s.kuznetsov

Reputation: 15213

your text on the button will always be perfectly positioned if you add these rules that I've marked:

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

Upvotes: 1

Lalji Tadhani
Lalji Tadhani

Reputation: 14149

Change this CSS, Remove 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;
}

Upvotes: 1

Related Questions