Hey everyone,
I’ve been having some trouble with the Survey Form project, mainly with alignment and spacing.
Here’s my codepen:
https://codepen.io/batpat/pen/JQdWmb
I have already searched google, the site and the HTML & CSS book by Jon Duckett but I haven’t been able to figure out either what I am doing wrong or what I am not doing at all. Thanks everyone!!
label can have a for attribute that connects it to an input with an id. for must match id.
label does not have attribute type or name.
name binds radio buttons together.
It’d be nice if Age was a valid subscriber’s age range using min and max.
Your design uses the same pattern for radio button section and checkbox section.You should use the same html pattern for both.
Drama section title use label without input Time section uses span. Better for both would be h2 or h3. Don’t agree? Then use p. It’s not necessary to put these two sections inside a div since they are styled the same and are the only two lists on the page. Only one single ul style is necessary.
Both the label and the input is inside a li so they want to stay together. You floated the input left and a previous style centered the label.
Remember that .title is floating the text left which doesn’t look good towards the end of the form. Consider vertically aligning the comments’ elements and the submit button.
Hope this helps. I like the survey color and shape.
Thank you very much for your feedback! I will be reviewing everything you mentioned throughout the weekend 
I’ll be back with an update!
The Jon Duckett book isn’t bad but the layout part is very outdated.
I’d strongly suggest looking into learning Flexbox and CSS Grid. Floats are really not something you want to use for layout unless you have to support old browsers. It isn’t bad to learn a bit about them but I wouldn’t use them for page layout in a current project. I will say, they work just fine for their intended purpose of floating text around an element (like an image).
Here is a fairly simple form example using both some Flexbox and CSS Grid
https://codepen.io/lasjorg/pen/KLEKpN
Thank you for the reply and for confirming my suspicions!
After my review this weekend, I was thinking I might have to go over Flexbox and CSS Grid.
I’ve found some resources online like the mozilla developer site, the css-tricks site and some youtube videos.