Text near radio/checkbox buttons not appearing correctly

Hi,

For some reason my radio buttons and checkboxes are not displaying correctly. The text (labels) are all under the buttons, rather than beside them.

What am I doing wrong?

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <meta charset="utf-8">
  <link rel="stylesheet" href="styles.css">
  <title>FCC Survey Form</title>
  <head>
    <h1 id="title">freeCodeCamp Survey Form</h1>
    <p id="description">Thank you for taking the time to help us improve the platform.</p>
    <form id="survey-form">
      <fieldset>
      <label id="name-label">Name 
        <input type="text" id="name" required placeholder="Enter your name">
        </label>
    <label id="email-label">Email <input type="email" id="email" required placeholder="Enter your email"> </label>
    <label id="number-label">Age (optional) <input type="number" id="number" min="13" max="120" placeholder="Age"></label>
    </fieldset>
    <div>
    <fieldset>
    <label>Which option best describes your current role?</label>
    <select id="dropdown"><option value=""></option><option>Select current role</option><option value="1">Student</option><option value="2">Full Time Job</option><option value="3">Full Time Learner</option><option value="4">Prefer not to say</option><option value="5">Other</option></select>
    </fieldset>
    </div>
    <fieldset>
<label>
Would you recommend freeCodeCamp to a friend? <input type="radio" name="choice">Definitely <input type="radio" name="choice">Maybe <input type="radio" name="choice">Not sure
</label>
</fieldset>
<fieldset>
<label>What is your favorite feature of freeCodeCamp? <input type="checkbox" value="fep">Front-end Projects
<input type="checkbox" value="bep">Back-end Projects
<input type="checkbox" value="dv">Data Visualization 
<input type="checkbox" value="chl">Challenges
<input type="checkbox" value="osc">Open Source Community 
<input type="checkbox" value="ghr">Gitter help rooms
<input type="checkbox" value="vid">Videos
<input type="checkbox" value="cm">City Meetups
<input type="checkbox" value="wiki">Wiki
<input type="checkbox" value="forum">Forum
<input type="checkbox" value="ac">Additional Courses
</label>
</fieldset>
<fieldset>
<label>Any comments or suggestions? <textarea id="comments" rows="3" cols="30" placeholder="Enter your comment here..."></textarea>
<button id="submit">Submit</button>
</fieldset>
</form>
/* file: styles.css */
body {
  width: 100%;
  margin: 0 auto;
  height: 100vh;
  background-color: lightblue;
  font-family: Verdana;
  font-size: 16px;
}

label {
  display: block;
  margin: 0.5rem 0;
}

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

form {
  margin: 0 auto;
  max-width: 500px;
  max-height: 300px;
  width: 60vw;
}

fieldset {
  border: 0;
  padding-top: 2rem;
  padding-bottom: 2rem;
  padding-left: 0;
  padding-right: 0;
}

fieldset {
  border: none;
  padding: 2rem 0;
  border-bottom: 3px solid #3b3b4f
}

input, textarea, select {
  margin-top: 10px;
  display: block;
  padding-left: 20px;
}



Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36 OPR/100.0.0.0

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

Do you know what display: block does?

just do the thing:

step 1: add inline class to all the checkbox and radio button input.
step 2: Remove display:block property from the input,textarea,select selector.
step 3: add width:100%; in the input,textarea,select selector.
step 4: add width:unset; to the .inline class selector in css.
step 5: remove margin-top and padding-left from the input,textarea,select selector.

Hope this will help to you

and please let me know in the comment if you are able to solve this using this step .Your reply is important for me.

1 Like

hi, thank you so much for the steps. unfortunately, this did not work and my radio buttons / their text content did not align properly :frowning: i think i will have to write the code from scratch again.

Or, just don’t set the radio button and check box inputs to display: block.

Also, you aren’t using label properly on your radio button/check box groupings. There are too many issues to explain here. Instead, take a look at the following for a good example:

WebAIM: Createing Accessible Forms

thank you. i realized i wasn’t using label properly some time after i posted. i’ll check out the article and work on it

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.