Survey Form - Build a Survey Form - Radio and Checkbox inputs CSS

Tell us what’s happening:
The code works in terms of HTML, I am posting this to request someone to tell me how to place the Radio and Checkbox inputs vertically aligned with the text showing to the right of the inputs, like how it is on the website. https://survey-form.freecodecamp.rocks/

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<link rel="stylesheet" href="styles.css">
<html>
  <head>
    <h1 id="title">freeCodeCamp Survey Form
</h1>
    <p id="description">Thank you for taking the time to help us improve the platform</p>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
   </head>

  <body>
    <form id="survey-form">

    <label id="name-label"> Name <input class="xLength" id="name" type="text" placeholder= "Enter your name" required> </input> 
    </label>
     <label id="email-label"> Email <input class="xLength" id="email" type="email" placeholder="Enter your email" required> 
     </label>
      <label id="number-label"> Age (optional) <input class="xLength" id="number" type="number" min="10" placeholder="Age" max=100> 
      </label> 

     <label> Which option best describes your current role?
      <select class="xLength" id="dropdown" placeholder=>
        <option>Select current role</option>
        <option>Student</option>
        <option>Teacher</option>
      </select>
    </label>

    <label> Would you recommend freeCodeCamp to a friend?
      <input type="radio" name="radioB" value="Definetly"> Definetly</input>
      <input type="radio" name="radioB" value="Maybe"> Maybe</input>
      <input type="radio" name="radioB" value="NotSure"> Not sure</input>
    </label>

    <label>What is your favorite feature of freeCodeCamp?
      <select class="xLength">
        <option>Select an option</option>
        <option>Challenges</option>
        <option>Projects</option>
      </select>
    </label>

    <label> What would you like to see improved? (Check all that apply)
      <input type="checkbox" value="FrontEnd"><span> Front-End Projects </span></input>
      <input type="checkbox" value="BackEnd"><span> Back-End Projects </span></input>
      <input type="checkbox" value="Data"><span> Data Visualization </span></input> 
</label>

<label> Any comment or suggestions?
<textarea placeholder="Enter your comment here..."></textarea>
</label>

      <button  type="submit"_ id="submit">Submit </button>
      
    </form>
  </body>
</html>
/* file: styles.css */
*{
  font-family: sans-serif;
}
#title, #description{
  text-align: center;
  color: white;
} 
#title{
  font-size: 20px;
}
#description{
  font-size: 100%;
  text-decoration: italic;
  margin: auto;
  font-style: italic;
  margin-bottom: 20px;
}

html{
  background-image: url(https://i.insider.com/5d42e0ce100a2402a63a98f6?width=700);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-color: rgba(0,200,0,0.5);
}

form{
  background-color: rgb(40,40,80); 
  width: auto;
  max-width: 70%;
  min-width: 200px;
  height: auto;
  opacity: 90%;
  border-radius: 5px;
  color: white;

  display: flex;
  flex-direction: column;
  align-items: left;
  
  margin: auto;
  padding: 4%;
}

input[type="checkbox"], input[type="radio"]{
  
}

.xLength{
  width: 100%;
  border-radius: 5px;
  height: 35px;
  margin-top: 5px;
  margin-bottom: 25px;
}
textarea{
  height: 100px;
  width: 100%;
  margin-bottom: 50px;
  margin-top: 5px;
}

#submit{
  height: 40px;
  background-color: rgb(40,200,85);
  color: white;
  font-size: 90%;
  border: 0;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36 Edg/105.0.1343.53

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

Is this the section you mention? can you add screen shot of the picture how your code previewed?

Yes, that section and the checkboxes too.

<label> What would you like to see improved? (Check all that apply)
      <input type="checkbox" value="FrontEnd"><span> Front-End Projects </span></input>
      <input type="checkbox" value="BackEnd"><span> Back-End Projects </span></input>
      <input type="checkbox" value="Data"><span> Data Visualization </span></input> 
</label>

Here is what it looked like. (The background image is a placeholder)

For clarification, I tried using CSS to fix it but couldn’t get the desired result.

if you post your code on codepen, it may make it easier for people to help you.

Thanks for the advice, here’s the codepen.

FCC Survey Forum (codepen.io)

did you know that you can literally steal the styling rules from this site?
You just have to use the browser developer tools (right-click on the radio button for eg and choose Inspect and it will show you the exact styling for that element)

for eg. when I inspect the radio buttons I see that their label styling is like this:

label {
    display: flex;
    align-items: center;
    font-size: 1.125rem;
    margin-bottom: 0.5rem;
}
1 Like

I am not sure how I missed to try to inspect element, even though I was aware of it…

Thanks for your help :sweat_smile:

just remember to try to understand what you steal…
(just in case next time you don’t have anybody to copy from)