Survey Form Formatting

HTML-CSS
1

Hello all. I’m struggling with getting the checkboxes and radio buttons to behave nicely. Not looking for a solution - but maybe some direction of how I could re structure my code and do things right. Feel like I’m hacking away at it without much though at this point.

https://codepen.io/drustin/pen/LoRoXJ?editors=1100

Hoping to have the label for the checkboxes/radiobutton to the left as seen in the sample project:
https://codepen.io/freeCodeCamp/full/VPaoNP

Thanks.

2

Hi @Drustin2,
So the way you have it coded now is;

<label> Label name </label> then <input type= >

which gives you what you told it; a Label name and the a radio button/checkbox

Now if we kind of change things around just a bit and say;

<label> <input type= > Label name </label>

How would that come out?

3

That brings things closer - I realized last night that my current positioning solution isn’t going to work. I think I will go ahead and explore the option of using CSS Grid with 2 columns after reading about it more here.

I think I need to logically separate items on left and right. Doing:

label, p{
  display: inline-block;
  text-align: right;
  width: 45%;
  padding: 5px 10px 5px 0; 
  margin: 0;
}

Is only a partial solution because of my radio button and check boxes havelabels on different side than the rest of my other field inputs.

4

My hint will get the radio buttons/checkboxes on the left and the labels for them on the right without using grid.

5

It yielded some unflattering results :slight_smile:

https://codepen.io/drustin/pen/LoRoXJ?editors=1100