Please help me, my login page deforms when I click it to type on my android

Question

When I tap or hover the login button it reshapes and deforms making it dirty please can you help me
https://code.sololearn.com/W9f52GkvIYX5/?ref=app

Answer 1

your .box is positioned and have a fixed height set... as soon as content doesn't fit inside it, the box let its content overflow ^^

you should remove 'height' from .box css rules, to let it grow with its content ;)

(on android, when typing inside a field the soft keyboard pop up, reducing viewport height)

Answer 2

Thanks

Answer 3

My email label now hovers over the input

Answer 4

Y does it do that text overlay when I don't fill the email form right

Answer 5

yes, email field is only 'valid' if it contains a '@' inside it: in your case, the :valid hack to detect empty field cannot work as expected... you need to use js (jquery) to set/unset classname according to input field empty or not ^^

your code, modified to handle empty field classnames through js and introducing some responsiveness to adapt sizes according to viewport size (and moving your scripts tags outside of <style>: link to jquery required, your script commented):

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