CODEWITHSUNDEEP
cssmobile-website
Jans Rautenbach
Jans Rautenbach

Reputation: 469

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?

Upvotes: 1

Views: 147

Answers (3)

instead
instead

Reputation: 3471

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).

Upvotes: 1

Mohamed hesham
Mohamed hesham

Reputation: 130

using media screen and (orientation: portrait) means that when is the width of the screen bigger then its height and when the soft keyboard popup the width of the screen become bigger than the height so that happen

Upvotes: 0

Munim
Munim

Reputation: 2768

Try using specific width checkpoint instead. Like below-

@media screen and (max-width: 500px) {
  # rest of your code is here
}

Upvotes: 0

Related Questions