Survey Form Feedback - FCC

I just finished the survey form project and I want feedback from it.
Especially the responsive design, design in general, and the functionality
https://codepen.io/EdgeO/pen/OJXYBWN
Thank you for any feedback and tips to improve it.

Welcome to the forums @EdgeO. Your form looks good. Some things to revisit;

  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • User’s should be able to click on the label to toggle a selection, not just the radio button / checkbox
  • Change the cursor to a pointer when hovering over the submit button
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.

When I shrink the screen, the black form area becomes very thin. Could you possibly make it so that the blue background shrinks instead? I think that would make it more appropriate for mobile.

I appreciate the inclusivity of your gender input.

I fixed this issue by using a media query so that when the screen becomes thin the padding of the document will reduce.
Thanks for pointing this one out.

If you would’ve used a relative unit (em for instance) you wouldn’t need a media query