Survey Form - help + review

HTML-CSS
1

'Sup homies :smiley:

I (almost) finished my Survey Form.

You can check it out here : https://codepen.io/Bulbusaur/pen/JjPBMjB

Quick question :
I can’t seem to find out how to align the radio-buttons, checkboxes and textarea on one-line with the text?
What am I not seeing? Can someone point it out?

Thanks in advance ,

Regards

10
101113×486 132 KB

2

Hello @Bulbusaur here are answers to your questions and some tips and suggestions on the project.
Lets start by answering your question, In order to be able to align text elements or some inline-block elements vertically we need to give the the value of vertical-align: middle; here is a code to fix your prob

.starter {
  float: left;
  margin-right: 21px;
  margin-left:-1.7vw;
  font-family:Monserrat,sans-serif;
  display: inline-block;
  vertical-align: middle;
}
.checkboxfield {
  float:left;
  margin-right:17px;
  margin-left:-1.7vw;
  display: inline-block;
  vertical-align: middle;
}
.button label {
  vertical-align: middle;
  display: inline-block;
}

Getting back to the feedback:

  1. your text fields gets smaller in small screen sizes (it won’t provide enough typing room for the user)
  2. try to add for attribute for your radio button sibling labels to associate your radio button with labels
  3. Your labels found inside .left-side div element create an awful visual impact in smaller screens as they are pushed to the left, the space at the right side of them left empty (I don’t know if it is deliberate but it is not pleasant for me)
  4. Your submit button doesn’t seem clickable (no hover effect nor cursor change to visualize it is clickable)

Other than this four, it’s a great work. Keep reading, exploring and learning

1 Like
3

Sorry voor my late reply! Really am!

Thank you for taking the time to give me some tips!