Fcc: Survey Form feeedback

Fcc: Survey Form feeedback
0

#1

Feedback needed for survey form
Link - https://codepen.io/sxnaprkhr/full/bjQBNV

Also, it would be helpful if someone would tell me how to separate text from the checkbox when the screen width is below 400px.


#2

Can you elaborate more on what you mean by separate text from the checkbox? How exactly do you want to display the checkbox vs the text when screen width is below 400px?


#3

Why not first changing the margins/padding on the form, rows, left-div, and right-div first before separating the text from the checkbox?


#4

https://imgur.com/ggexQPC and https://imgur.com/GuOvIm8
Hopefully, you will get it.


#5

@RandellDawson looked into that?


#6

I will get you started. First put the following in your CSS.

.right > ul > li {
  display: flex;
}

Then change each of your li elements structure by putting the input first followed by a label. You will have to give a unique id attribute to each input and use the for attribute in each label to reference the input’s id. Below is your original li element for the Front-end Projects checkbox.

<li>
  <label>
    <input type="checkbox" name="future" value="Definitely"> Front-end Projects
  </label>
</li>

Change to:

<li>
  <input id="front-end-projects" type="checkbox" name="future" value="Definitely">
  <label class="check-box-label" for="front-end-projects">Front-end Projects</label>
</li>

FYI - You should really assign the value attribute a value which represents the checkbox value. The value attribute is what would actually be sent to a server if you actually submitted the form. “Definitely” has nothing to do with front-end projects.


#7

Thank you for that solution, I updated my pen with that and also changed the “value” attributes. I may have copied previous labels of the checkbox which had a value of “Definitely” in them. But I’ve updated those values.

Also, I would say that both of these work in the same way. If you click on the text, the respective checkbox will be checked.

<li>
  <label>
    <input type="checkbox" name="future" value="Definitely"> Front-end Projects
  </label>
</li>
<li>
  <input id="front-end-projects" type="checkbox" name="future" value="Front-end Projects">
  <label class="check-box-label" for="front-end-projects">Front-end Projects</label>
</li>