Project 2 RWD Project

Having some issues with creating space between my labels and text input elements…Here is the link to the code so far…

Any suggestions?

Hello Fab, i tweked the code a bit. i hope this solution helps you

<!Doctype html>
      <h1 id="title">Fresh Start Health Services</h1>
       <p id="description">Thank you for taking the time to help us improve our organization!</p>
    <form id="survey-form">
        <div class="form-design">
        <label id="name-label" for="name">Name</label>
      <input type="text" id="name" class="input-design" placeholder="Enter name here" name="name" required>
        <label id="email-label" for="name">Email</label>
      <input type="text" id="email" placeholder="Enter Email here" name="name" required>
         <label id="number-label" for="number">Age (optional)</label>
      <input type="number" id="number" min="7" max="99" placeholder="Enter Age Here" name="Age" required>
    <label  for ="dropdown">Which option best describes what services interest you the most?</label>
        <select id="dropdown" for="dropdown">
          <option value="Nutrition">Nutrition</option>
          <option value="Training">Personal Training</option>
          <option value="Mental Health">Mental Health</option>
          <option value="Yoga">Yoga</option>
          <div class="some-class">
  <p>Would you recommend Fresh Start Health Services to a friend?</p>
         <label > <input type="radio" id="" name="yes-no">Yes</label><br>
         <label> <input type="radio" id="" name="yes-no">No</label><br>
         <label> <input type="radio" id="" name="yes-no">Not sure</label>
          <div class="some-class">
 <p>What would you like to see improved?</p>
        <label for="options"><input type="checkbox" name="options">More Appointment Options</label><br>
         <label for="options"><input type="checkbox" name="options">More Articles</label><br>
         <label for="options"><input type="checkbox" name="options">More Info about Nurtrition</label><br>
         <label for="options"><input type="checkbox" name="options">More Appointment Options</label>
<p>Comments or Suggestions?</p>
        <textarea name="comment" rows="4" cols="50" placeholder="Enter comments here..."></textarea>
  <button id="submit" type="submit">Submit</submit>
@import url('');

* {
  box-sizing: border-box;

body {
  background-color: rgb(52, 143, 235);

#title {
  font-family: 'Noto Serif';


#description {
  font-style: italic;

#survey-form {
  background-color: rgb(220,220,220);
  border-radius: 5px;
  width: 85%;
  margin: 2.5rem auto;
  padding: 1.5rem;

label {
  align-items: start;
  font-size: 1.5 rem;

input {
  width: 100%;
  border: 1px solid;
  border-radius: .2rem;
  height: 2.5rem;
  margin: .5rem;

.some-class {
  flex-direction: row;

as you can see, i added a class to the divs sorrounding each area and then gave some flex properrties to that div so all the children of that div have the correct position.

Welcome back @fab33150.

You have some mismatched tags. Run your code through the W3C validator. Just copy your HTML and paste it into the ‘Validate by Direct Input’ tab.

  • Also, when using codepen. codepen only expects the code you’d put within the <body> </body> tags in HTML. (No need to include the body tags). For anything you want to add to <head> click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
  • Don’t use the <br> element to force spacing. Use margin and/or padding instead.
  • There are ways to group radio buttons and checkboxes. Take a look at using the <fieldset> element
1 Like

Thanks for the suggestion!

Thank you for the tips Roma!

1 Like