Survey Form - Help needed

Hi guys I’m currently completing the Survey Form project but am stuck with one issue. All the labels except for the checkbox and radio ones are aligned to the left of the input area. I am trying to create a textarea with the label aligned to the left, but it keeps on going to center top of the textarea. Since I am a complete beginner, my code is extremely messy, so I can’t tell what needs to be changed. Any help/feedback would be greatly appreciated!

Codepen link: https://codepen.io/josephk96/pen/RqVgaE

Thank you in advance :slight_smile:

Looks nice. Sorry for taking so long. Your post would have been replied to much faster if it was in the “project feedback” section. Looks like you got your textarea label to the side. Congradulations!

Just a few other things to help. The problem is that you’re running out of space in the radio button and checkbox sections because of the label length such as using “intelligence” vs. “IQ”. There were also some other things.

Sometimes you put <p> inside of <label>. They can’t go there. Changing that helped slim things up.

Put display:inline-block on the li not label. Now you don’t need to float:left; the radio buttons. The label will be on the left of the button which is the order in the source code. If you want it on the right the code it like you did the checkboxes.
Notice that I unchecked the float in the developer tools in the screenshot.

“Reason” and “Favorite Pet” they should be a p or lower heading maybe h3 and re-styled to get the look you want.

The reasons section is still running out of room but now the labels are on the same line.

  • Make a wider form

  • Make two rows of labels

  • Or let them be vertical

I used * {border: red 1px solid;} to put lines around everything and counted how many boxes around the elements trying to get rid of the thick red areas. That’s how I found the ps in the labels.