Survey Form Overlay Issue

HTML-CSS
1

I have created a div with a position of absolute. The height is set to 100vh. When I add a margin of 1em to the tops of my h1 and p, the overlay shortens and I don’t know how to fix it… Any ideas?

/* file: index.html */
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <div id="overlay"></div>
  <h1 id="title">Survey Form</h1>
  <p id="description">A short survey project</p>
  <form id="survey-form">
    <label for="name">Name:</label>
    <input id="name" type="text" placeholder="Enter Your Name" required>
    <label for="email">Email:</label>
    <input type="email" id="email" placeholder="Enter Your Email" required>
    <label for="number">Age 
      (optional):
    </label>
    <input id="number" type="number" min="0" max="100" placeholder="Age">
    <label for="dropdown">Which one:</label>
    <select id="dropdown">
      <option value="" selected disabled>Choose one</option>
      <option value="1">idk</option>
      <option value="2">i still don't know</option>
    </select>
    <label><input type="radio" value="a" name="a-b"> a</label>
    <label><input type="radio" value="b" name="a-b"> b</label>
    <label><input type="checkbox"  value="a1" name="a1-b1"> a1</label>
    <label><input type="checkbox" value="b1" name="a1-b1"> b1</label>
    <textarea id="comments" rows="12" cols="25" placeholder="Anything Else?"></textarea>
    <input id="submit" type="submit" value="Submit">
  </form>
</body>
</html>

/* file: styles.css */
body {
width: 100%;
height: 100vh;
margin: 0;
background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTv1vbwTxLHRBQ1QzlcnlZhee27s7RarIxh6g&usqp=CAU);
background-size: cover;
background-repeat: no-repeat;
color: white;
}

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

#overlay {
width: 100%;
height: 100vh;
margin: 0;
background: rgba(50, 50, 125 ,0.55);
position: absolute;
top: 0;
z-index: -1;
}

#survey-form {
background: rgb(20, 20, 80);
width: 70%;
margin: auto;
}

  **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.5 Safari/605.1.15

Challenge: Build a Survey Form

Link to the challenge:

2

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.