I’m working on the Survey Form and I really need some help. Below is the code pen to my code. Here are my questions.
How do I space out my radio and checkboxes? I don’t like how they look. For example I may want to make them horizontal and have the labels show to the right or left.
How do I make my button larger? For example I want to change the width and height. I tried adding a css rule but for some reason the rule is not applying.
My final question might be a little vague but let me give it a try…I’ve notice with CSS there is no error checking or pop up that will say…“this rule will not apply blah blah…try this blah blah…” I find myself praying and hoping a rule will apply when designing a basic site. LOL Is there any tools or basic principals I can follow when working with CSS?
First, don’t use <br> to separate them. If you want the label and input to act as a single unit then wrap them in a div. This will also make it easier to lay them out with flex. Remember, flex applies to the direct children. Right now every individual label and input is a direct child of the div you have flex set on. Wrapping the label and input in a div will then make the wrapper divs the direct children for the flex layout.
You are using the class selector (.submit) instead of the id selector (#submit).
Try to keep your CSS selectors as simple as possible. I’m not seeing anything complex in your current CSS. You are either using classes or ids, so I’m not sure where you would be “praying and hoping” for something to work. Can you give us a specific example of something you are having a problem with?
“1. First, don’t use <br> to separate them. If you want the label and input to act as a single unit then wrap them in a div. This will also make it easier to lay them out with flex. Remember, flex applies to the direct children. Right now every individual label and input is a direct child of the div you have flex set on. Wrapping the label and input in a div will then make the wrapper divs the direct children for the flex layout.”
Okay that makes prefect sense. Thank you
“2. You are using the class selector ( .submit ) instead of the id selector ( #submit ).”
Well that’s a silly mistake…lol
“3. … I’m not sure where you would be “praying and hoping” for something to work. Can you give us a specific example of something you are having a problem with?”
I have a CS degree and was really never taught web development. I’m more use to things popping out and telling me what went wrong…so I guess the praying and hoping is my anxiety kicking because I know the majority of my work is trying to figure out why certain rules don’t work… but I digress LOL Anyway I’ll keep my CSS code simple and easy to read. Thanks for your help. I’ll report back if I have anymore questions.
Personally, I would probably not use flex layout on the <form>. But if you want to, it’s the align-items property that is causing everything to line up down the middle of the form, so start by getting rid of that. I think you might find it a little easier to style your form if you wrapped all of the content inside the form in a div, or put a div around the form and set the border on the wrapper div instead. This should open up more options to help you style the form the way you want.