Survey Form Project Feedback: The Flexbox Conundrum

Code Feedback
#1

Hi all,

Kindly take a peek at my Survey Form Project. https://codepen.io/mdotcoder/pen/GLmEgN
Your feed backs are most appreciated. THANK YOU!!

This was not my initial design, but Flexbox didn’t flex so much.
Aligning each

<li> <labels> <input type="text"></label> </li>

within their own row while trying to make them responsive was just a lot of trial and error with width sizes (%, em, px) which failed miserably.

The codes seems to have a mind of their own sometimes, choosing not to listen to your commands and doing exactly as they wish.

“Flexbox is a beautiful nightmare, play with it at your own peril”.

#2

So here are my thoughts

  • Age and Survey Number don’t get selected by clicking their labels
  • Survey number is a bit too ambiguous, why is it asking me for this?
  • Maybe the first option in Age should just say under 18, the next option start at 18?
  • Lifestyle I think should be check boxes, multiple of these could apply to a single individual
  • It gets pretty squished on mobile, could make it take up more room if someone is on their phone
#3

Thanks so much. I find your suggestions very insightful. I’ll work on those.

#4

Thank you very much!!!

#5