HTML elements move when keyboard is opened on tablet

Question

I made a simple html page for tablet/smartphone (landscape layout). I have a problem when I tap on a input to write some text, the virtual keyboard move/push every elements.

Screenshot :

Any way to prevent that ?

php and css link

Answer 1

It appears your CSS is tied to a percentage of the view height, so when the keyboard is opened the height becomes smaller and shrinks your container.

if you give your main container a min-height you should be able to prevent this happening