Need help with styling my survey form

https://codepen.io/darrylat/pen/XWNKVZB
Hello everyone, I’m in need of help with that survey form. I’m trying to put the labels in front of the radio buttons and the checkboxes, but I don’t know what to do.
I would appreciate any assistance.

The issue here is that the .form-group div has display set to flex and flex-direction set to column and thus all of the labels and inputs are stacking in one column. So you’ll need to figure out a way to work around that. I would recommend you treat each label/input combo as a single unit. What do you think you could add to do that?

Try putting input tags inside the label tags, something like this-
<label for="open-mat"> <input type="checkbox" id="open-mat" name="open-mat" value="open-mat">Open-mat</label>

I would need to redo the whole spacing/styling if I do that. Doable, I just thought I could do something by leaving the flex there. Thank you for your input!

Going to try that now, thanks

I don’t think it is as hard as you think it would be. I recommended that you treat each label/input combo as a single unit. This means changing the HTML a little. In particular, adding something that would allow the label/input to act as a single unit. Once you fix that then they won’t be affected by the flex display on the container.

1 Like