Tell us what’s happening:
Describe your issue in detail here.
The first issue I’m having is that I want the labels to be above the input boxes and be left justified but they seem to remain on the same line.
Second issue is I tried to make the selection at “Would you recommend freeCodeCamp to a friend?” choices be in a new line not on the same line the dots move all the way to the left side.
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<title>Survey Form</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<body>
<header>
<h1 id="title">freeCodeCamp Survey Form</h1>
<p id="description" class="description-title"><i>Thank you for taking the time to help us improve the platform</i></p>
</header>
<form id="survey-form">
<div class="form-group">
<label id="name-label" for="name">Name
<input placeholder="Enter your name" required id="name" class="name-input" type="text">
</label>
</div>
<div class="form-group">
<label id="name-label" for="email">Email
<input placeholder="Enter your email" required id="email" class="email-input" type="email">
</label>
</div>
<div class="form-group">
<label id="age-label" for="age">Age (optional)
<input placeholder="Age" required id="age" type="number" class="age-input" min="10" max="99">
</label>
</div>
<div class="form-group">
<p>Would you recommend freeCodeCamp to a friend?</p>
<label>
<input name="user-recommend" class="recommend" value="definitely" type="radio" checked>Definitely
</label>
<label>
<input name="user-recommend" class="recommend" value="maybe" type="radio" checked>Maybe
</label>
<label>
<input name="user-recommend" class="recommend" value="not sure" type="radio" checked>Not sure
</label>
</div>
</form>
</body>
</html>
/* file: styles.css */
h1 {
text-align: center;
margin: auto;
font-size: 28px;
}
.description-title {
text-align: center;
}
.name-input, .email-input, .age-input {
width: 100px;
height: 20px;
}
.form-group {
margin: 0 auto 1.25rem auto;
padding: 0.25rem;
text-align: center;
}
.recommend {
display: block;
}
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36
Challenge: Responsive Web Design Projects - Build a Survey Form
Link to the challenge: