css - Text sizes change when soft keyboard pops up -

i have designed webpage looks on mobile:

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

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