I am finishing up the Survey form project, and everything looks good, except the fact the description for all of my Radio buttons are displaying below the buttons, and not to the right of them like I want.
Here is my HTML code for the radio buttons:
<label id="recommend">Would you recommend freeCodeCamp to a friend?</label>
<input id="radio" type="radio" name="answer" value="definitely">Definitely</input>
<input id="radio" type="radio" name="answer" value="maybe">Maybe</input>
<input id="radio" type="radio" name="answer" value="not-sure">Not sure</input>
The survey-form id is the container holding all of the survey sections, and I wonder if the flex-direction: column is what is causing the issue? I have played around for a couple hours, and nothing is fixing the issue. Hopefully a wiser and more-experienced set of eyes will see either what can be done, or what I have done to cause the problem.
To make things easier, here is the codepen I am working from:
I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
Let’s start from the beginning.
Prior to your adding any styling the respective label were alongside of the radio buttons and checkboxes. That means, your styling is what’s causing them to be on separate lines.
If you were to work backwards a little, what have you done that changed it?
On a side note, try cleaning your code a little to make it easier to work with. For instance, input is a self-closing tag and you to not want to use the <br> element to force line breaks or spacing. That’s what CSS is for.
Reference MDN Docs
disclaimer: i am not super familiar with flex box properties yet. That being said, when i deleted display: flex; flex-direction: column/row in #survey-form and .radio it got it back to a place where they were acting like inline elements again. Maybe someone has a better explanation on why the flex box acted that way.
ok so, here is what i think is happening vs what i think you are wanting to do.
So, currently you have everything in your form set up as flex with a column. that means everything that is a direct child of that, is treated as it’s own element and stacked on top of eachother. in your .radio class, you’re trying to nest the flex so that radio is treated as by row. except that your label is on the same level as your input radio, and the flex doesnt know the label is for the radio buttons. personally, i have been nesting my inputs inside of my label tags.
so, you could nest your radio button inside of your label tag with the text , and name that label (maybe like… class="flex-row" or something and then do the CSS for the row direction in the label class, since it will treat the input element and the text together.
I tried to nest the input inside the label tag, but keep getting an error. Can you show me an example of how you do it, so I can see the syntax? This is so frustrating, because if have the rest of the project working fine, i just want it to look pretty , so i can use it in my portfolio.
Thanks, I will do it now. I’m obviously really new to this, and trying to learn as much as i can, and build great looking projects. Luckily, i am not on a time crunch, so the learning is the number one objective.
