hey guys, would really appreciate some feedback on my survey form! i also have a few questions:
- how do I remove the box around my radio buttons?
- how do I arrange my checkboxes in a 3x3 grid?
- 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
You’ve used a fieldset, which has a default border, so:
fieldset {
border:none;
}
The answer is in the question, with CSS grid
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.
Roma
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.
thank you for answering my questions!
thank you for the feedback! i will further work on my code
system
Closed
6
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.