Hey there, it’s my first question here, so I apologize if something is not right.
I just did the Survey form and pretty liked how mine is, but for two aspects that I couldn’t change.
The first one is the space without the purple background on the top of the page. I placed a 0px border in the body and in the div, but it just stays there.
The second one is the labels and checkboxes/radiobuttons. No matter what I do I can’t place them aligned, in the Safari they are in separated lines and in Chrome they’re on the same line, but not aligned.
Do you know how can I fix this things?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="styles.css">
<title>freeCodeCamp Survey Form</title>
</head>
<body>
<div class="background">
<h1 id="title">
freeCodeCamp Survey Form
</h1>
<p id="description">
Thank you for taking the time to help us improve the platform
</p>
<form id="survey-form">
<fieldset>
<label for="name" id="name-label">Name</label>
<input type="text" id="name" placeholder="Enter your name: " required>
</fieldset>
<fieldset>
<label for="email" id="email-label">Email</label>
<input type="email" id="email" placeholder="Enter your email: " required>
</fieldset>
<fieldset>
<label for="number" id="number-label">Age</label>
<input type="number" id="number" min="13" placeholder="Age" max="120">
</fieldset>
<fieldset>
<label for="dropdown">Which option best describes your current role? </label>
<select id="dropdown">
<option> Select current role</option>
<option>Student</option>
<option>Full time job</option>
<option>Full time learner</option>
<option>Prefer not to say</option>
<option>Other</option>
</select>
</fieldset>
<fieldset>
<p>Would you recommend freeCodeCamp to a friend?</p>
<label for="1">Definitely</label>
<input type="radio" name="recomm" value="definitely">
<label>Maybe
<input type="radio" name="recomm" value="maybe"></label>
<label>Not Sure
<input type="radio" name="recomm" value="notsure"></label>
</fieldset>
<fieldset>
<label for="fav">What is your favorite feature of freeCodeCamp?</label>
<select id="fav">
<option>Select an option</option>
<option>Challenges</option>
<option>Projects</option>
<option>Community</option>
<option>Open Source</option>
</select>
</fieldset>
<fieldset>
<p>What would you like to see improved? (Check all that apply)</p>
<label class="inline">Front-end Projects
<input type="checkbox" class="inline" value="front">
</label>
<label>Back-end Projects
<input type="checkbox" value="back">
</label>
<label>Data Visualization
<input type="checkbox" value="data">
</label>
<label>Challenges
<input type="checkbox" value="challenges">
</label>
<label>Open Source Community
<input type="checkbox" value="open">
</label>
<label>Gitter help rooms
<input type="checkbox" value="help">
</label>
<label>Videos
<input type="checkbox" value="videos">
</label>
<label>City Meetups
<input type="checkbox" value="meetups">
</label>
<label>Wiki
<input type="checkbox" value="wiki">
</label>
<label>Forum
<input type="checkbox" value="forum">
</label>
<label>Additional Courses
<input type="checkbox" value="other">
</label>
</fieldset>
<fieldset>
<p>Any comments or suggestions?</p>
<textarea>
</textarea>
</fieldset>
<fieldset>
<input type="submit" id="submit">
</fieldset>
</form>
</div>
</body>
</html>
body {
margin: 0;
background: url("https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg");
height:100%;
width: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.background{
background-color: #312782d6;
}
#title, #description {
color: #a0a0a0;
text-align: center;
}
p {
font-size: 1.125rem;
}
label {
display: block;
font-size: 1.125rem;
margin-bottom: 0.5rem;;
}
form{
background-color: #a0a0a0;
margin: 0 10vw;
padding: 5vh 10%;
}
fieldset{
border: 0px;
}
input, button, select, textarea{
margin:0;
font-size:inherit;
width: 100%;
}
input[type="checkbox"]{
display: inline;
vertical-align: middle;
}
#inline {
display: inline;
width: unset;
margin: 0 0.5em 0 0;
vertical-align: middle;
}