Search code examples
cssmobile-website

Text sizes change when soft keyboard pops up

I have designed a webpage that looks like this on mobile:

Mobile webpage

But when I click on the text input and the keyboard pops up, the text sizes change completely:

Mobile webpage 2

My css code is as follows:

@media screen and (orientation: portrait) {
    #div_pword_content {
        width: 100%;
    }
    #div_pword_content h1 {
        font-size: 40px;
    }
    #edt_password {
        width: 300px;
        height: 40px;
        font-size: 30px;
    }
}

#div_pword_content {
    text-align: center;
    margin: auto;
}

What is causing this problem and how can I fix it?

Solution

  • You didn't post whole CSS from Your website. You have CSS:

    @media screen and (orientation: landscape) {
    #div_pword_content {
        font-size: 40px;
    }
}

    Which fires when You trying to enter password. Why this is the problem?

    It is quite interesting since You are in portait view BUT when keyobard is shown, width of the available screen is higher than height, and that change orientation to landscape.

    To fix it, You have to add in landscape media query:

    #div_pword_content h1 {
    font-size: 40px;
}

    In other words, set font size of h1, which is lost because was set only in portrait orientation. It looks like h1 is set to 2em by default which makes it 80px font size (at least in Firefox).