css - Text sizes change when soft keyboard pops up -


i have designed webpage looks on mobile:

mobile webpage

but when click on text input , keyboard pops up, text sizes change completely:

mobile webpage 2

my css code follows:

@media screen , (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 causing problem , how can fix it?

you didn't post whole css website. have css:

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

which fires when trying enter password. why problem?

it quite interesting since in portait view when keyobard shown, width of available screen higher height, , change orientation landscape.

to fix it, have add in landscape media query:

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

in other words, set font size of h1, lost because set in portrait orientation. looks h1 set 2em default makes 80px font size (at least in firefox).


Comments

Popular posts from this blog

resizing Telegram inline keyboard -

command line - How can a Python program background itself? -

php - "cURL error 28: Resolving timed out" on Wordpress on Azure App Service on Linux -