Project 2 RWD Project

1

Having some issues with creating space between my labels and text input elements…Here is the link to the code so far…https://codepen.io/fab33150/pen/oNXxzJR

Any suggestions?

2

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

<!Doctype html>
<html>
  <body>
    <header>
      
      <div>
      <h1 id="title">Fresh Start Health Services</h1>
       <p id="description">Thank you for taking the time to help us improve our organization!</p>
    </header>
      </div>
    
    <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>
    </div>
      
      <div>
        <label id="email-label" for="name">Email</label>
      <input type="text" id="email" placeholder="Enter Email here" name="name" required>
      </div>
      
      <div>
         <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>
      </div>
      
      <div>
    <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>
         </select>
        <div>
        
          <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>
          
          <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>
          </div>
          
          <div>
        
<p>Comments or Suggestions?</p>
        <textarea name="comment" rows="4" cols="50" placeholder="Enter comments here..."></textarea>
        </div>
          <div>
  <button id="submit" type="submit">Submit</submit>
        </div>
    
        
      
      </form>
   
    
    
    
    
  
    
  
  </body>
  
  
  
  
  
</html>

@import url('https://fonts.googleapis.com/css?family=Noto+Serif:700i&display=swap');

* {
  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 {
 display:flex;
  flex-direction: row;
  font-weight:1000;
  padding:15vh;
}

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.

3

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
    https://www.w3schools.com/tags/tag_fieldset.asp
1 Like
4

Thanks for the suggestion!

5

Thank you for the tips Roma!

1 Like