Hello,
What i am trying to achieve is the same template as in the Survey Form example they give: https://codepen.io/freeCodeCamp/full/VPaoNP
So what i want to do is to ask a question, and the user has to click in the circle of her/his choice.
For now i just want to have my circles vertically aligned, and not horizontally laid out by default: https://codepen.io/Philip_B/pen/zgBNjm
Phil
Other than the design, you should look at your html
as well. I noticed you have multiple form
elements in your markup.
Ideally you have one form
that will collect all of the data to submit it all at once.
To achieve your goal of vertically aligned radio boxes you may want to change their display to block
or flex
with a flex-direction
set to column
form:last-of-type{
display: flex;
flex-direction: column;
}
OR
input[type='radio']{
display: block;
}
1 Like
Thank You mnichols08!
It doesn’t seem to work though…if I add the x for the word flex; it even widens my name placeholder box across the page.
Tried the other method and it’s the same result…
https://codepen.io/Philip_B/pen/zgBNjm
NP. You updated the HTML
like I mentioned and that made the css
code that I provided not work
You need to wrap the area you want to be flex in a <div>
and maybe give a class of something like flex-column
.
Then you would need to style that class with the same code but using that selector instead.
.flex-column {
display: flex;
flex-direction: column;
}