GameRoom Survey-FreeCodeCamp (Build a Survey Project)

Hello Campers

I learned a lot in this project, structuring a form with HTML and it gave me the opportunity to experiment with CSS…

What i need to work on…

I’m really struggling with responsive design at the moment and as you may see i made some strange choices when it came to making the form responsive. I know CSS Flexbox would be the best solution to use in order to solve this problem but at the moment I’m finding it hard to really understand how to use this display property within my work. Further reading will solve this.

Feedback would be appreciated a lot!

Kind Regards

Wayne

Checkboxes and radio buttons should be to the left of their labels so they line up in a column. Speaking of labels, none of them are using the <label> tag, which should be used so clicking on the label also activates the form element they’re attached to.

For more about <label>, see https://www.w3schools.com/tags/tag_label.asp

1 Like

Thanks for the feedback yeah i see that now. I appreciate you spotting that one out for me.

Do you really need responsive here ?
You could add a min-width to prevent the form to be too small when you reduce the window size.
Appart from that, it’s pretty much ok

min-width won’t prevent a window from resizing, it just makes it scroll off to the right when the window is too small. I’m also pretty sure that responsive layout is one of the requirements of the project.

When filling out a form the fields that are marked with an asterisk are required fields. You currently have all your fields marked with an asterisk even though they are not all required. Ideally, if a field isn’t required, don’t mark it with the asterisk.

1 Like

It is saying that I haven’t problem with id part of label. But that is the thing, I have the id part!
https://codepen.io/GC2002/pen/mdrwpvV

@garima0224.be20, this thread is two years old.

If you’re having an issue please open a new thread, describe the issue you’re having and don’t forget to include a link to your pen.
Thank you.