Survey Form - Build a Survey Form

HTML-CSS
#1

Tell us what’s happening:
Can’t seem to figure out a way to get my radio and checkbox buttons to be in line with text.

I’ve listed the code I have for the radio buttons and checkbox, some screenshots of the result and the CSS styles sheet. Any help is appreciated!

radio

<input id="yes" type="radio" name="yes-no" value="yes"><label for="yes">Yes</label>

<input id="no" type="radio" name="yes-no" value="no"><label for="no">No</label>

Screenshot 2022-12-05 at 11.59.49 AM

checkbox

<input type="checkbox" name="email" value="email">Email
<input type="checkbox" name="text" value="text">Text
<input type="checkbox" name="no" value="no">No thank you

**css style sheet**

/* file: styles.css */
body {
width: 100%;
height: 100vh;
margin: 0;
background-color: #948C7C;
color: #F0EFEE;
font-family: Playfair;
font-size: 16px;
}

h1, p{
  margin: auto;
  text-align: center;
}


form{
  width: 60vw;
  max-width: 500px;
  min-width: 300px;
  margin: 0 auto;
  padding-bottom: 2em;
  align: center;
 }

fieldset {
  border: none;
  padding: 0.5rem 0;
  margins: 0 auto;
}

label{
display: block;
margin: 0.5rem 0;
vertical-align: middle;
}

input, select{
  width: 100%;
  max-height: auto;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.1 Safari/605.1.15

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

#2

Change the position of the opening tag of the ‘label’ elements:

<label for="yes"><input id="yes" type="radio" name="yes-no" value="yes">Yes</label>

<label for="no"><input id="no" type="radio" name="yes-no" value="no">No</label>

Then, change the CSS code by deleting the following:

input, select{
  width: 100%;
  max-height: auto;
}

Do the same with ‘input’ elements that have the type attribute set to the ‘checkbox’ value.

#3

That did the trick! Thank you! For future reference, what’s the reason to delete the CSS code?