My survey form has a white space at the bottom in certain browser sizes and don’t know how to get rid of it. I already tried background-size: cover; but its not doing anything.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Customer Service Survey Form</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1 id="title">Customer Service Survey Form</h1>
<p id="description"><em>Tell us how we did so we know how to improve.</em></p>
<form method="post" id="survey-form">
<fieldset>
<label for="name" id="name-label">Name <input id="name" name="name" type="text" placeholder="Enter your name here." required /></label>
<label for="email" id="email-label">Email <input id="email" name="email" type="email" placeholder="Enter your email here." required /></label>
<label for="age" id="number-label">Age <input id="number" name="name" type="number" min="13" max="120" placeholder="Enter your age here." required /></label>
</fieldset>
<fieldset>
<label for="location">Store Location
<select id="dropdown" name="location">
<option value="">(select one)</option>
<option value="1">Houston</option>
<option value="2">Dallas</option>
<option value="3">San Antonio</option>
<option value="4">Austin</option>
</select>
</label>
<p class="otherp">How long have you been a customer with us?</p>
<label for="0-3-years"><input id="0-3-years" type="radio" name="years" class="inline" value="1" />0-3 years</label>
<label for="3-7-years"><input id="3-7-years" type="radio" name="years" class="inline" value="2"/>3-7 years</label>
<label for="7-10-years"><input id="7-10-years" type="radio" name="years" class="inline" value="3"/>7-10 years</label>
<label for="10+years"><input id="10+years" type="radio" name="years" class="inline" value="4"/>10+ years</label>
</fieldset>
<fieldset>
<label for="experience">How would you rate your experience last time you shopped with us?
<select id="experience" name="location" required>
<option value="">(select one)</option>
<option value="1">Very Bad</option>
<option value="1">Bad</option>
<option value="1">Okay</option>
<option value="1">Good</option>
<option value="1">Very Good</option>
</select>
</label>
<label for="why">Why did you give the rating that you gave in the previous question?
<textarea id="why" name="why" rows="3" cols="55" placeholder="Type your reasoning here."></textarea>
</label>
<label for="more">Any additional comments?
<textarea id="more" name="why" rows="3" cols="55" placeholder="Type any additional comments here."></textarea>
</label>
<label for="acknowledgement">
<input id="acknowledgment" type="checkbox" name="acknowledgement" class="inline" value="1" /> I acknowledge that my answers will be used and recorded.
</label>
<label for="truth">
<input id="truth" type="checkbox" name="truth" class="inline" value="2" /> I acknowledge that my answers are true.
</label>
</fieldset>
<input id="submit" type="submit" value="Submit" />
</form>
</body>
</html>
background-image: linear-gradient(
180deg,#ffe1e180,#ff9d9d80
), url(https://assets.entrepreneur.com/content/3x2/2000/20161208172924-GettyImages-583665377.jpeg);
background-size: cover;
background-repeat: no-repeat;
height: 100%;
width: 100%;
font-family: sans-serif;
}
h1, p {
text-align: center;
margin: 1em auto;
}
form{
background-color: #ff9d9d80;
max-width: 550px;
margin: 1rem auto 1rem auto;
padding: 1em 1em 1em 1em;
border-radius: 25px;
}
label {
display: block;
}
input, select {
display: block;
}
.otherp {
text-align: left;
padding-left: -1em;
margin-bottom: .5em
}
textarea {
width: 100%;
margin-bottom: 1em;
margin-top: .5em;
padding: .5em .5em 0 .5em;
border: none;
}
.inline {
display: inline;
}
input[type="text"] {
margin: .5em 0 .5em 0;
padding: .5em 0 .5em .5em;
border-radius: 5px;
border: none;
}
input[type="checkbox"] {
margin-left: -.25em;
}
input[type="email"] {
margin: .5em 0 .5em 0;
padding: .5em 0 .5em .5em;
border-radius: 5px;
border: none;
}
input[type="submit"] {
margin: 0 auto;
width: 50%;
padding: 1em 0 1em 0;
}
input[type="text"]{
width: 100%;
}
input[type="email"]{
width: 100%;
}
input[type="number"]{
width: 100%;
margin-top: .5em;
border-radius: 5px;
border: none;
padding: .5em 0 .5em .5em;
}
fieldset {
border: none;
}
input[name="years"] {
margin-left: -.5;
}
select {
margin: .5em 0 .5em 0;
width: 100%;
background-color: white;
border-radius: 5px;
border: none;
padding: .5em
}
input[id="truth"]{
margin-top: .5em;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/112.0
Challenge: Survey Form - Build a Survey Form
Link to the challenge: