Survey Form (Pretend Book Site)

For my survey form, I pretended I was making a form for a social book site.

Everything passed, but I have 2 issues that bug me. In Firefox, the number input is shorter, and on my phone, the checkboxes and radio buttons are touching their labels. I’m going to move on to my next assignment, but I’d love any insight into what could fix those things.

Oh, another thing I was curious about is checkbox formatting. I didn’t enter the labels alphabetically (which I would do if I were starting over), and I’d originally intended to, but I had difficulty figuring out how to get them to order in alphabetized columns. I couldn’t even fake it by copy and pasting, because I wanted fewer columns as the window size decreased. I’m not sure if I just didn’t know how to Google this or if I was asking for something that can’t be done.

Thanks in advance for any feedback!


This makes me feel like I really slacked on my survey form. One thing that jumps out is adding a bit of space between the labels and checkboxes/radio buttons to make them breathe a bit more.

1 Like

The labels look like they’re touching on my chrome browser too. You can fix this by doing this:

label {
    margin-left: 5px;

The width of your number box can be changed like this:

#number {
  width: 405px;

I played around with your code a bit, you can see changes here :slight_smile:

Other recommendations:

  • use a sans-serif font. They tend to look better on screens.
  • using white space and comments in your code makes human readability easier
1 Like

a quick solution to give some space between the inputs type radio or checkboxes and their labels is to add some column gap to your grids in #radio-buttons and #genre-list. something like column-gap: 10px;

1 Like

Thanks for your feedback! I will definitely try those things out!

Its good but the doted red border doesn’t really look that good on the box.

It seems as if the text is too small on the survey.

Holy cow! This is so cool and beautiful :open_mouth: