Build a Survey Form (CSS grid doesnt work well on some parts)

Tell us what’s happening:

I was trying to build the web with using CSS grid and I cant find the mistake which is failing to seperate the part of

“Things that should be improved in the future
(Check all that apply):” and the part of “Any Comments or Suggestions?” on the form.

I think there might be something wrong using the grid-templates-area since they are just didnt fit like it should by using CSS grid while other part of the for looks fine.

Your code so far

h1{ text-align: center; } html{ background-color: #40E0D0; } p{ text-align: center; } .ques1{ grid-area: question1; } .ques2{ grid-area: question2; } .ques3{ grid-area: question3; } .ques4{ grid-area: question4; } .ques5{ grid-area: question5; } .ques6{ grid-area: question6; } .ques7{ grid-area: question7; } .ques8{ grid-area: question8; } #name{ grid-area: name; } #email{ grid-area: email; } #number{ grid-area: number; } .role{ grid-area: role; } .recommend{ grid-area: recommend; } .dropdown11{ grid-area: likethemost; } .future{ grid-area: future; } .suggest{ grid-area: suggest; } #submit{ grid-area: submit; } form{ display: grid; grid-template-column: 1fr 1fr; width: 70%; margin-left: 15%; margin-right: 15%; grid-gap: 10px; grid-template-areas: "question1 name" "question2 email" "question3 number" "question4 role" "question5 recommend" "question6 likethemost" "question7 future" "question8 suggest" "submit submit"; }

Survey Form

Let us know how we can improve freeCodeCamp

<label for="name" id="name-label" class="ques1">Name : </label>
<input type="text" id="name" placeholder="Name" required>

<br>
<br>

<label for="email" id="email-label"  class="ques2">Email : </label>
<input type="email" id="email" placeholder="email" required>

<br>
<br>

 <label for="number" id="number-label"  class="ques3">Age : </label>
<input type="number" id="number" placeholder="age" min="1" max="3" required>

<br>
<br>

 <label for="dropdown"  class="ques4">Which option best describes your current role?  </label>

<input list="dropdown" class="role">
<datalist id="dropdown" value="Please select">
  <option value="Student">
   <option value="Full time job">
    <option value="Full time learner">
      <option value="Others">
  </datalist>

<br>
<br>

 <label for="number"  class="ques5">How likely is that you would recommend freeCodeCamp to a friend? </label>

<div class="recommend">
<input type="radio" id="number" value="Definitely">Definitely<br>
 <input type="radio" id="number" value="Maybe">Maybe<br>
  <input type="radio" id="number" value="Not sure">Not sure<br>
</div>

 <label for="dropdown1"  class="ques6">What do you like most in FCC:  </label>

<input list="dropdown1">
<datalist id="dropdown1" class="dropdown11" value="Please select">
  <option value="Challenges">
   <option value="Community">
    <option value="open source">
  </datalist>

<br>
<br>

<label for="number"  class="ques7">Things that should be improved in the future

(Check all that apply):

<div class="future">
<input type="radio" id="number" value="Front-end Projects">Front-end Projects<br>
 <input type="radio" id="number" value="Back-end Projects">Back-end Projects<br>
  <input type="radio" id="number" value="Data Visualization">Data Visualization<br>

  <br>
  <br>
  
<label for="suggest"  class="ques8">Any Comments or Suggestions? </label>
  
<textarea rows="4" column="30" class="suggest">Enter your comments here....</textarea>
  
  <br>
  <br>
<input type="submit" id="submit" name="submit">
</form >

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36.

Can you link your codepen (or whatever sandbox you’re using) so we can have a play around to try and help? This is a bit too much code to look at then transfer manually and play with.

And you can always make a fork and send us that link so the original is protected. I have had a bunch of people help with my codepen efforts.

I can’t send the link because that it doesnt allow me to
It say that it is for security reason and i need to use freecodecamp more for this feature

By adding https with this may be able to access the link!
://codepen.io/jingxuan98/pen/zyVPpe?editors=1000

This works :smiley:

Just out of interest are you using grid here because you think it’s the right thing to use, or because you want to practice using grids (there’s no right or wrong answer)? I only ask because in this instance, a grid feels like using a bit of an overcomplication on a relatively straightforward challenge - especially as you’ve got stuck.

You can achieve the same effect with divs and inline block displays without sending yourself mad trying to organise a grid.

Ahh because the first thing come out in my mind is grid so i decide to use grid

But how can i fix the remaining parts? which is “Things that should be improved in the future
(Check all that apply):” and the part of “Any Comments or Suggestions?” on the form

I’m just about to leave work, so I can’t help you much at the moment as I don’t have a ton of time to sit and study the code, but I can already see that you need to replace your input type="radio" with input type="checkbox" for your future class - this is so you can select and deselect answers as you wish.

Also did you notice that your .futures dropdown box was hidden?

Thats so kind of you thank you for reviewing it when you are busy, hope it doesnt disturb you :sweat_smile:

Yeah that is actually a part with i am confusing about because seems that i did right on that part but it was hidden (actually it wan at the bottom of the page…)

Still getting stuck of this :persevere: