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).
Comments
Post a Comment