Project Feedback: Survey Form (Can't Figure Out Margins)

Code Feedback
1

Here is a link to my Codepen: https://codepen.io/h_ess_k/pen/GRZbXOW

Hello! I’ve finished my survey form project and I’m looking for some feedback.
Particularly, I do not understand why the margins I’ve added to my labels do not seem to do anything (my goal is to increase the amount of space between say, the Name label, and the input to enter a name).

I’ve been struggling to figure out the margins for a couple of days now and can’t figure out what’s going on! Any help would be much appreciated - Thank you. :slight_smile:

2

Set the display to block on your labels and then they will honor the top/bottom margin. Also, get rid of all those <br>s as you won’t need them anymore since the margins will work.

1 Like
3

Thank you, I will try that!!

4

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

  • Verify your email addr with codepen so we can see your page full view
  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
  • 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
  • Make the page responsive. Remember, the R in RWD stands for Responsive.
    • There’s a horizontal scrollbar on smaller screens.
  • As mentioned, do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
1 Like