A few important html tips
- you shouldn't have empty divs for any reason. If you need to put a background image on the whole page put it on the body
- every input must have a label
- the error icons are decorative so alt must be empty if placed in html. Or you could make them background images on invalid inputs if preferred
- the error messages should be wrapped in an element that has an aria live attribute on it and a unique ID for each one
- the inputs need aria describedby pointing to the id of its error container
All of these things are important habits to get into as soon as possible so you write accessible forms.
Marked as helpful
Just checked this on mobile and it's completely unusable as most of the content is cut off screen..
The cause is the height 100vh on sign up div; and the absolutely positioned background
Definitely move background color / image to the body and change that height 100vh to min-height. That will let it grow as needed, not limit everything to the height of a users screen
Marked as helpful
@Targitay2012
Posted
@grace-snow hello!
Thanks for the hints! Newbies like me need to get this kind of advice.
I entered an empty div out of desperation: for some reason, the background of the page placed in the pseudo-element overlapped the form itself, so it was impossible to enter data or press the button. I tried both z index and transform translate z, but nothing worked. Today I did it again and everything worked as it should, I don’t understand anything.
@Targitay2012 I don't know why you would try to use a pseudo element either. The background can go straight onto the body in this challenge
@Targitay2012
Posted
@grace-snow, I proceeded from the fact that other blocks of the page with a different background can go further. So I tried to do everything in one block. And yes, you are right, in this task, you can give a background to the body.
