Survey Form - Build a Survey Form

HTML-CSS
1

after doing the cafe and registration form lessons a second time i returned to the survey form…after entering the css for body nothing else is responding, like the "h1,p { text-align: center;}

then i tried playing with centering the submit button and now find myself just cutting and pasting code from the registration lesson but nothing is happening.
Your code so far

<!-- file: index.html -->
<!DOCtype html>
<html lang="eng"></html>
  <head>
    <meta charset="UTF-8">
    <title>Survey Form</title>
    <link rel="stylesheet" href="styles.css" />
  <head/>
  <body>
    <h1 id="title" class="header">Survey Form</h1>
    <p id="description" class="header"> Please provide your information</p>
  <form id="survey-form">
  <fieldset>
    <label for="suffix">Mr./Mrs./Miss.: <input id="name" type="text" placeholder="enter suffix" required></label>
    <label for="name" id="name-label">Enter Name <input id="name" type="text" placeholder="enter your full name" required></label> 
    <label for="email" id="email-label">email:<input          id="email" type="email" placeholder="enter valid email" required></label>
    <label for="number" id="number-label">Age:<input id="number" type="number" min="18" max="100" placeholder="age" required></label>
    </fieldset>
    <fieldset>
      <label for="dropdown">
          <select name="dropdown" id="dropdown"placeholder="choose one">
          <option value="noobie">Noob</option>
          <option value="novis">Novice</option>
          <option value="Pro"  >Pro </option>
          <option value="Pro"  > Pinball Wizard </option></select>
      <label for="Male"><input id="Male" type="radio" value="male" name="gender"/>Male</label>
      <label for="Female"><input id="Female" type="radio" value="female" name="gender"/>Female</label>
      <label for="checkboxes"> choose one:
<input id="idk" type="checkbox" name="choose" value="yes">Yes</label>
<input id="idk" type="checkbox" name="choose" value="no">No</label>
    </fieldset>
    <fieldset>
<label for="comments"> please enter comments:
<textarea id="comments" name="comments" placeholder="tell us your thoughts">
</textarea>
    </fieldset>
<input type="submit" id="submit" value="Submit">
</form>
</body>







/* file: styles.css */
body {
  width: 0;
  height:100vh;
  background-color:rebeccapurple;
  color: white;
  font-family: cursive;
  font-size: 14px;}

h1 { 
  margin: 1em auto;
  text-align: center;
 
}

form {
  width: 60vw;
  max-width: 500px;
  min-width: 300px;
  margin: 0 auto;
  padding-bottom: 2em;
}
fieldset {
  border: non;
  padding: 2rem 0;
}
.header{ text-align: center;}
fieldset {
  border: none;
  padding: 2rem 0;
  border-bottom: 3px solid #3b3b4f;
}
label {
  display: block;
  margin: 0.5rem 0;
}
input[type="submit"] {display: block;}

Your browser information:

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

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

2 
width: 0;

Why did you add this to the body selector?

Edit: Just to be clear. What is the center of something that has no width? Does it even have a center?

I realize the background color might be throwing you off but that is just how it works on the html/body element. Even if the body had 0 height and width you would still see the full page color.

Unless you use the dev tools or add an outline around all elements it can be hard to see what is happening.

2 Likes
3

:smiley: :grinning: :smile: That makes sense and it did cross my mind so im not as stupid as i think! there is no center because there no width because i didnt declare any he he h e. idk why there is a zero there or if i had even noticed LOL. thank you cant wait to get back to it tomorrow…