Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML HTML Forms Choosing Options Radio Buttons

Isaac Asante
Isaac Asante
4,752 Points
Posted by Isaac Asante
Isaac Asante
4,752 Points

Different layout from the video in my browser

Hi, I'm adding this code but at my end, I'm seeing line breaks after the Age label, each radio buttons and their labels. So each element comes on the next line...

<label>Age:</label>
          <input type="radio" id="under_13" name="user_age" value="under_13"><label for="under_13">Under 13</label>
          <input type="radio" id="over_13" name="user_age" value="over_13"><label for="over_13">13 and above</label>

Is there an error with my code? Thanks!

2 Answers

Jeremy Frimond
Jeremy Frimond
14,470 Points
Jeremy Frimond
Jeremy Frimond
14,470 Points

What browser are you using?

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Isaac,

You're seeing all 5 elements each on their own line?

Nick had added a line break <br> after the "Under 13" label so that the 2nd radio button and label would appear on the next line. That's missing from your code and you don't have class="light" for the radio button labels.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

I decided to check the css and the omission of the "light" class was the majority of your problem along with not having the <br>

The project uses:

label {
  display: block;
  margin-bottom: 8px;
}

label.light {
  font-weight: 300;
  display: inline;
}

By omitting the "light" class your labels for the radio buttons are not set back to inline