I hope that I managed to make it responsive enough.
At a quick glance, the only thing I might suggest is that you change the LAST
td a little, the one containing the submit button?
- give it a
colspan=2 attribute, doing that will make that one cell fill the entire bottom row of the table;
- give it a style
text-align: center; to move the submit button to be centered on the form.
Also, for the sake of consistency (not that it will impact much, just my OCD kicking up), you use a
footer tag to contain the footer content, why not wrap the
h1 and the descriptive paragraph in a
header tag? Not a must, simply a consistent thing.
Other than that, again at a quick glance, very clean and neat. Well done! And have you tested it with the FCC tests yet?
Could use setting a max-width for your inputs to keep them from spilling out on mobile,
also use a media query so the main form body is not as wide on full screen
Thanks, both for the feedback and the suggestions, I tried to build them in.
@snowmonkey, yes I di already test it and it passed the tests.
@ChrisCline1138, what max-width do you think would work? I went with 120px for screens below 400px and while it works on my phone, it might not on some smaller phones. However if I go any smaller it doesn’t look very neat - i.e. you can barely see the placeholder text. Perhaps I should go with smaller max-width as well as smaller font-size for smaller screens?
I also went with 50% for the form for screens over 900px, hopefully it looks better on full screen now.
that works, looks good