Banana Survey feedback

Hi,

I went through a lot trying to get the grid looking right on this project. Any feedback is welcome. Thank you.

https://codepen.io/lituohuang/pen/oOKYXq

3 Likes
  1. I would move the min-width up to like 840px in the media query and then stack the form element in the center.

Maybe have this be the default for the container before the grid kicks in.

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 420px;
  margin: 0 auto;
}
  1. I would give the grid align-items: center;

  2. Give the inputs some padding.

  3. Use cursor: pointer; on the #submit button.

Anyway, nice job.

1 Like

Nice page, though I never want you to order a pizza for me. :grinning:

Couple of things to revisit;

  • make it so the user can click on the labels for their choices rather than having to just click the radio buttons/checkboxes
  • change the cursor to a pointer when hovering over the submit button
1 Like

@Roma You are right, for some reason I thought there was a test for that. I guess not.

@lituohuang You should add the for attribute to your labels with the value equal to the input id

<div id="name1" class="leftcol">
  <label for="name" id="name-label" class="rightcol">Name
</div>
  <input type="text" id="name" placeholder="First Last" required>
</label>
1 Like

@lasjorg @Roma Thank you both for taking the time to give me feedback; I will incorporate the suggestions and reply with the updated link.

1 Like

Oh my GOSH! this survey form drives me bananas!!!
so much that I am going to shout “GREAT JOB!!”
I really wonder what banana pizza tastes like. tell me when you try it!

@ConnerOw1115 Hahaha thank you. I have no idea what banana pizza tastes like and I don’t plan on finding out.

1 Like

Yeah! me too.
tries banana pizza
feeds it to pet mokey

@Roma @lasjorg I have made all the changes here: https://codepen.io/lituohuang/pen/oOKYXq

Thanks again for your feedback!

1 Like

Good job! Looks good

1 Like

Looks good. One thing I like to do is set the resize property on textarea to vertical only. That way the user can only make the box taller and not wider (so it doesn’t overflow the form).

textarea {
  resize: vertical;
}
1 Like

@lasjorg Nice, I added that. Thanks.

1 Like