Feedback on my Survey Form page please

Here’s my Survey Form project. The custom radio and checkbox buttons were an interesting part of this to make it a little more complete.

I have a question about responsiveness. I used the vw unit to try to make the form responsive and it would work for the browser on my pc but not on my phone. Why is that?
I googled and found that I had to add this line of code in the head tag.
<meta name="viewport" content="width=device-width,initial-scale=1.0">
Why did this work?

I appreciate any help and recommendations to improve it. Thanks.

Overall very nice job, just a few issues:

  • You are missing a <label> on the <textarea>.
  • Don’t use <br> to create breaks between elements (this is considered bad form).
  • The keyboard focus indicator needs to be a little more prominent as I tab through the inputs. Use the CSS outline property to make it stand out more. It is non-existent on your custom radio button/check box inputs so you’ll need to fix that as well.
  • The main content on your page should be wrapped in a <main>.
  • (This one is real picky) As I increase the text size the radio buttons/check boxes don’t stay in the same position relative to their content but rather start drifting upward. If you are a perfectionist like me this would bug you :slight_smile:

I used <label but it isnt move down 1 row so I have to use br> Please help me :((

And also the email input, I dont know how to solve this:
User Story #6: If I enter an email that is not formatted correctly, I will see an HTML5 validation error.

You’ve got a couple of options here. Get rid of the <br> between the <label> and <input> and instead:

  • Set the CSS display property on either the <label> or <input> to block.
  • Set the CSS flex property on the <div> wrapping them to flex and the CSS flex-direction property to column. This will automatically make the <input> take up the entire width of the page so you’ll want to also set a max-width on that.

Hey, thanks for the feedback. I fixed all of the issues you brought up. I do have a question about CSS though.

How can I style this suggestion drop-down menu that comes up when entering information in the form?