Hi, everyone
I have just created a survey form and everything else looks okay apart from the alignment of my Radio and Checkboxes. I have used inline-block which was supposed to work but it didn’t work. I need some help.
This is my code so far https://codepen.io/Ochukwuenyem/full/OJVwKpX
@import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');
* {
box-sizing: border-box;
}
body {
font-family: 'Raleway', sans-serif;
margin: 0;
text-align: center;
background-image: linear-gradient(115deg,
rgba(58, 58, 158, 0.8),
rgba(136, 136, 206, 0.7)), url(https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
form {
max-width: 500px;
margin: 0 auto;
background-image: linear-gradient(#37B9E9, grey);
padding: 30px 20px;
border-radius: 3px;
}
h1 {
margin: 0;
text-align: center;
color: white;
}
h1+p {
margin-top: 8px;
text-align: center;
color: white;
}
.form-control {
max-width: 450px;
margin-bottom: 30px;
color: white;
text-align: left;
display: block;
width: 100%;
}
.form-control input[type="radio"],
.form-control input[type="checkbox"] {
display: block;
width: auto;
}
.form-control label {
margin-top: 20px;
}
.form-control input,
.form-control select,
.form-control textarea {
width: 100%;
display: block;
margin-top: 8px;
border-radius: 3px;
padding: 6px;
border: 1px solid #ffffff;
font-family: 'raleway', sans-serif;
font-size: 15px;
resize: vertical;
}
#comments {
height: 150px;
}
#submit-button {
color: white;
background: #37B9E9;
border: 1px solid #777777;
width: 100%;
padding: 10px;
border-radius: 3px;
}
</style>
<h1 id="title"> freeCodeCamp Survey Form</h1>
<p><i id="description">Thank you for taking the time to help us improve the platform</i></p>
<form id="survey-form">
<div class="form-control">
<label for="name" value="name" id="name-label">Name</label>
<input type="name" placeholder="Enter Your Name" required>
</div>
<div class="form-control">
<label for="email" value="email" id="email-label">Email</label>
<input type="email" placeholder="Enter Your Email" required>
</div>
<div class="form-control">
<label for="age" value="age" id="number-label">Age (Optional)</label>
<input type="number" min="10" max="200" placeholder="How old are you?">
</div>
<div class="form-control">
<label for="role" value="role">Which option best describes your current role?
</label>
<select>
<option selected>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>
</div>
<div class="form-control">
<label>Would you recommend freeCodeCamp to a friend?</label>
<label for="recommend-1"><input type="radio" name="recommend"> Definitely</label>
<label for="recommend-2"><input type="radio" name="recommend"> Maybe</label>
<label for="recommend-3"><input type="radio" name="recommend"> Not sure</label>
</div>
<div class="form-control">
<label for="role" value="role">What is your favorite feature of freeCodeCamp?
</label>
<select>
<option selected>Select an option</option>
<option>Challenges</option>
<option>Projects</option>
<option>Community</option>
<option>Open Source</option>
</select>
</div>
<div class="form-control">
<label>What would you like to see improved? (Check all that apply)
</label>
<label for="improve-1"><input type="checkbox" name="improve-1"> Front-end Projects
</label>
<label for="improve-2"><input type="checkbox" name="improve-2"> Back-end Projects</label>
<label for="improve-3"><input type="checkbox" name="improve-3"> Data Visualization
</label>
<label for="improve-4"><input type="checkbox" name="improve-4">Challenges
</label>
<label for="improve-5"><input type="checkbox" name="improve-5"> Open Source Community
</label>
<label for="improve-6"><input type="checkbox" name="improve-6"> Gitter help rooms
</label>
<label for="improve-7"><input type="checkbox" name="improve-7"> Videos</label>
<label for="improve-8"><input type="checkbox" name="improve-8">City Meetups
</label>
<label for="improve-9"><input type="checkbox" name="improve-9">Wiki
</label>
<label for="improve-10"><input type="checkbox" name="improve-10"> Forum
</label>
<label for="improve-11"><input type="checkbox" name="improve-11"> Additional Courses
</label>
</div>
<div class="form-control">
<label>Any comments or suggestions?
</label>
<textarea id="comments" placeholder="Enter your comment here..."></textarea>
</div>
<div class="form-control">
<input type="button" value="SUBMIT" id="submit-button">
</div>
</form>
type or paste code here