Survey Form - Build a Survey Form

HTML-CSS
1

I use (body { height: 100% }) but it only takes 100vh.:

It is okay when i run my code locally (i run with live server) but when i submit to freecodecamp, it doesn’t work. Please explain me, thank you so much.

My code

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Survey Form</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1 id="title">Survey Form</h1>
  <p id="description">My first project is building a survey form.</p>
  <form id="survey-form" action="" method="post">
    <section>
      <label id="name-label" for="name">Name:
        <input id="name" type="text" placeholder="Tran Uy" required>
      </label>
      <label id="email-label" for="email">Email:
        <input id="email" type="email" placeholder="bro12@gmail.com" required>
      </label>
      <label id="number-label" for="number">Age:
        <input id="number" type="number" min="12" max="120" placeholder="12+" required>
      </label>
      <label for="dropdown">Gender:
        <select name="gender" id="dropdown">
          <option value="">(Select your gender)</option>
          <option value="1">Male</option>
          <option value="2">Female</option>
          <option value="3">Other</option>
          <option value="4">Prefer not to say</option>
        </select>
      </label>
    </section>
    <section>
      <label class="pet" for="favorite-pet">What is your favorite cute animal?
        <label class="inline"><input id="favorite-pet" checked type="radio" name="cute-animal" value="dog"> Dog</label>
        <label class="inline"><input id="favorite-pet" type="radio" name="cute-animal" value="cat"> Cat</label>
        <label class="inline"><input id="favorite-pet" type="radio" name="cute-animal" value="capybara"> Capybara</label>
        <label class="inline"><input id="favorite-pet" type="radio" name="cute-animal" value="other"> Other</label>
      </label>
      <label class="food-choice" for="food">Choose your food:
        <label class="inline"><input type="checkbox" value="fried-rice"> Fried Rice</label>
        <label class="inline"><input type="checkbox" value="beef-steak"> Beef Steak</label>
        <label class="inline"><input type="checkbox" value="egg-benedict"> Egg Benedict</label>
        <label class="inline"><input type="checkbox" value="pho"> Pho</label>
        <label class="inline"><input type="checkbox" value="bun-bo-hue"> Bun Bo Hue</label>
        <label class="inline"><input type="checkbox" value="banh-mi"> Banh Mi </label>
      </label>
    </section>
    <section>
      <label for="feel">How do you feel today?
        <textarea name="you-feeling" id="feel"></textarea>
      </label>
    </section>
    <button id="submit" type="submit">Submit</button>
  </form>
</body>
</html>

/* file: styles.css */
body {
  background: linear-gradient(135deg, #0081a7, #00afb9, #fed9b7);
  height: 100%;
  width: 100%;
  font-size: 18px;
}

h1, p {
  text-align: center;
  color: #f5f6f7;
}

h1 {
  font-size: 40px;
}

p {
  font-size: 20px;
}

form {
  width: 60%;
  min-width: 300px;
  max-width: 500px;
  background-color: white;
  margin: 0 auto;
  border: 3px solid cyan;
  border-radius: 10px;
  padding: 20px;
}

section {
  border-bottom: 3px solid lightcoral;
  margin-bottom: 20px;
}

section:last-of-type {
  border: none;
}

label {
  display: block;
}

input, select, textarea {
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 15px;
  min-height: 25px;
  font-size: 16px;
  padding: 5px 8px;
  border: 1px solid;
  border-radius: 4px;
}

input[type="radio"], input[type="checkbox"] {
  width: unset;
  margin: 0 6px 0 0;
  align-items: center;
}

.pet {
  margin-bottom: 15px;
}

.inline {
  display: flex;
  align-items: center;
  margin-bottom: 8px
}

.radio-section {
  display: flex;
  flex-direction: column;
}

.food-choice {
  display: flex;
  flex-direction: column;
}

button {
  display: block;
  width: 60%;
  min-width: 200px;
  margin: 0 auto;
  font-size: 16px;
  padding: 6px 8px;
  border: none;
  background-color: lightcoral;
  font-weight: bold;
  color: white;
  border-radius: 6px;
  cursor: pointer;
}

Browser information:

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

Challenge Information:

Survey Form - Build a Survey Form

3

Hi there!
Your code is passing on my end. Try to clear your browser cache or change the browser for the project.

1 Like