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
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?
