Probelm with radio button in Survey Form project

Hello, I’m having a little problem with the radio buttons in the Survey Form project. The buttons are working, but their position is weird. I’ve been searching on google to see if I can find how I can fix it, but I can’t really describe it well enough to get the search results I want, so I decided to make this post. Here is a picture of what is happening:
image
See how the labels are not lining up with the buttons? The same thing is happening with the checkbox radio buttons.
When I click on Run Tests, it says I got all 17 requirements done, but I didn’t want to turn it in looking like that. I wanted them to be on the same horizontal line and aligned to the left. Like the ones from the FCC example. (https://codepen.io/freeCodeCamp/full/VPaoNP)
Here is the html code I wrote for the radio buttons:

<div class="radio-input">
      <p><b>Who is your favorite character from the first anime?</b></p>
        <input type="radio" id="ash" name="character" value="ash"> 
          <label for="ash">Ash</label><br>
        <input type="radio" id="brock" name="character" value="brock">
          <label for="brock">Brock</label><br>
        <input type="radio" id="misty" name="character" value="misty">
          <label for="misty">Misty</label>
    </div>

And here is the CSS:

.radio-input {
  padding: 10px;
  padding-bottom: 35px;
}

And here is the full project, if you need it: https://codepen.io/jmarcelo_/pen/qBrYogG
Thanks!

Hello.
Try to nest input inside its label.
For example:

<label for="ash">Ash
    <input type="radio" id="ash" name="character" value="ash">
</label>
1 Like

Be aware that

input {
  width: 640px;
  line-height: 28px;
}

This is affecting all the inputs including radio and checkboxes. Is it intentional?

2 Likes

If you want your buttons aligned to the left, <input> should come before <label> text, for example:

 <label for="ash"><input type="radio" id="ash" name="character" value="ash">Ash</label>
1 Like

Thank you! I didn’t realize that would affect the radio buttons also.

After I fixed what MrBondx pointed out, I did this and the buttons were aligned how I wanted them. Thank you, also.

1 Like

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