Help with checkbox and radio button alignment with Survey Form

1

Hi all,

I’ve been reading different code examples and flexbox to put together my survey form, then having a go myself. It’s all looking how I want, except for the radio and checkbox section - they’re a mess! I can’t get my buttons to align how they should, and the instructional labels for them don’t have space in the margin top and bottom like the rest of the form.

Could someone look at my code and lend me their views on a workaround? It’s so frustrating! https://codepen.io/zara-knox/pen/xxVgGJm

Oh, and it’s in character as Johnny Lawrence from Karate Kid/Cobra Kai, as that’s how I keep myself amused while I code. Please excuse the language.

Thank you!

2

Hey,

So how do you want them to align? I’m assuming you want the radios and checkboxes to be aligned on the left with the text for their options?

I don’t see any CSS targeting them

1 Like
3

Hi, if you change your css like this I think it will help you get things to where you want:

.personal input {
  display: block;
}

or, this will put the radio button and the label on the same line if you also remove the width: 70% on the .personal input.

container label { 
   display: block;
}
1 Like
4

Thank you so much! I knew there was a display: block missing in the mix somewhere! I really appreciate it your help.

5

Hi, yeah I was trying to get them lined up with the rest. A display: block was missing - thanks for your reply :slight_smile: