Survey form -need help with format

Project Feedback
#1

hey guys, would really appreciate some feedback on my survey form! i also have a few questions:

  1. how do I remove the box around my radio buttons?
  2. how do I arrange my checkboxes in a 3x3 grid?
  3. how do I change the amount of space between my labels and their respective radio buttons or checkboxes?

here’s the link! https://codepen.io/xintienlee/pen/JjbZgGd

thank you so much :slight_smile:

#2

You’ve used a fieldset, which has a default border, so:

fieldset {
  border:none;
}

The answer is in the question, with CSS grid :smiley:

Put all your checkboxes in a div with class checkbox-grid and add a grid:

.checkbox-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr)
}

You won’t like how the layout looks with that, see below:

In your labels, you have an input and some text. It would make sense to wrap the text with a <span>, so the structure is

<label>
  <input />
  <span>Label Text</span>
</label>

So now you can style those as you like, increase the distance with margins/paddings or rearrange the elements with flex.

#3

Your form looks good @xinny123. Some things to revisit;

  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • User’s should be able to click on the label to toggle a selection, not just the radio button / checkbox
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • Make your page responsive. Remember, the R in RWD stands for Responsive
    • There’s a horizontal scrollbar on smaller screens

Do you understand what HTML element added that box around the radio buttons?
Hint: It’s the element your radio buttons are nested in.

Research the column-count property

EDIT: I see someone’s already given answers.

#4

thank you for answering my questions! :slight_smile:

#5

thank you for the feedback! i will further work on my code :smiley: