Help with survey form (begginer)

HTML-CSS
1

hi there ! i hope im in the right place to ask

i just finished my first survey form (sort off)

im struggling to make radio buttons /checkboxes and labels in line
i searched this forum for the answers and tried some answers from google but without any luck
please help (i know the whole code is a mess pls dont judge me im just a begginer)
this is the link to it https://codepen.io/BM6987/pen/WNELgNq https://codepen.io/BM6987/pen/WNELgNq

2

Your form looks excellent!

You could wrap the label and input in a div and then apply “display: flex” to the div.

<div class = "flex">
  <label for="Maybe">Maybe</label>
  <input type="radio" name="user-recommend" id="Maybe" value="Maybe">
</div>

.flex {
  display: flex;
}
3

Thanks but what i meant is that the radio and checkboxes are not level with the labels , i dont want them to be all in one line . however your solution looks ok when applied to radio type but it doesnt with checkboxes :frowning:

4

I just had a deeper look. In the CSS, you have

.form-control input {
display:block;
width:90%;
  height:20px;
border: 1px;
border: solid;
  }

.input [type="radio"] {
 display:block;
}

The “display: block” makes the radio button a block element , so it starts on a new line and takes up the whole width. In addition, the width is set to 90% for all inputs.

After commenting out those lines, surround the the label and input with a “div” and you should get the desired effect.

Removing those CSS lines will remove some of the styles to the rest of the survey, so you may need to put those back in with specific classes.

I forked your project and made some changes here to give you an idea https://codepen.io/thudbuzz-the-decoder/pen/dyVmPgx.

Hopefully this helps you a little more :slight_smile: , good luck!

5

haha i knew it my css code is like house of cards

i was hoping to fix it without adjusting all the classes but i guess i have to spend more time on it

thank you very much for pointing me in the right the right direction i really appreciate it :+1: :+1:

6

You’re welcome, keep going, you are doing great :slight_smile:

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.