How can I keep the same size on my div when the keyboard appears on my phone?

Question

I wonder if I can use the same size and the same appearance when I type in a password so my "panda" can have the same appearance because when I use my phone to type something in the password form the "panda" looks very weird. I wonder if I can keep the same shape in some way. Any help would be appreciated :)
Sorry for my bad English :)

https://code.sololearn.com/WfHODuR8CZMo/?ref=app

Answer 1

You are using % for width and height specification, which is why it scales when your soft keyboard occupies a portion of your screen. By replacing them with px of the appropriate size, for instance, would be a feasible fix.

Answer 2

I've found an SO link, which appears to explain a similar issue. Hope it helps:

https://stackoverflow.com/questions/41038132/giving-height-in-percentage-squeezes-input-fields-when-soft-keyboard-opens-in-an

Answer 3

thank you for the help :)) Now it works :))

Answer 4

thank you for the help but then if I replace everything with px then how can I make it compatible on all resolutions?

Answer 5

Hmmmmm,

If that's the case, try setting a min-height attribute for your divs in px and leave the height and width declarations in %.

Answer 6

ok thank you for the help. I will try it out :)

Answer 7

you can use media queries for smaller devices