Need Help with Survey Form Project

1

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

2

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
3

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

4

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;
}