I am trying to learn to code as a hobby, to preface all this. HTML and CSS seemed like a fun place to start, because building websites seemed intriguing to me.
I am going through the survey form certification of the responsive web design curriculum, and I cannot get the checkboxes to align to the left side of the form like I want. specifically, I want each checkbox to have its own line, aligned to the left side of the form, not listing one directly after another as it is currently formatted. I have searched online for remedies, and have tried many. However, I am not well-versed in this area, so any help would be appreciated. I will list my code below.
h1,p {
margin: 5px;
text-align: center;
font-family: 'Poppins', sans-serif;
}
body {
color: white;
background-color: rgb(51, 0, 0);
font-family: 'Poppins', sans-serif;
}
form {
background-color: rgb(32,0,0);
width: 80vw;
margin: 0 auto;
}
label {
display: block;
}
input {
background-color: rgb(160, 160, 160);
}
.input-checkbox {
display: inline-block;
margin-right: 0.625rem;
min-height: 1 rem;
min-width: 1 rem;
}
input[type="submit"] {
display: block;
width: 60%;
margin: 1em auto;
height: 2em;
font-size: 1.1rem;
background-color: rgb(160, 160, 160);
border-color: white;
min-width: 300px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Survey Form</title>
<link rel="stylesheet" href="styles.css">
</head>
<h1 id="title">freeCodeCamp Survey Form
</h1>
<p id="description">Please answer below to help us improve our platform.</p>
<hr>
<body>
<form id="survey-form">
<label for="name">First and Last Name</label>
<input id="name" type="text" name="name" placeholder="Enter your Name" required></input>
<label for="email">Email Address</label>
<input id="email" type="email" name="email" placeholder="Enter your Email" required></input>
<label for="age">Age (optional)</label>
<input id id="number" type="number" min="13" max="120" name="age" placeholder="##"></input>
<label for="referrer">How did you hear about us?</label>
<select id="referrer" name="referrer">
<option value="">(select one)</option>
<option value="1">Youtube</option>
<option value="2">TikTok</option>
<option value="3">Online Forum</option>
<option value="4">Other</option>
</select>
<legend>Select Your Gender:</legend>
<label for="gender">
<input id="Male" type="radio" name="gender" class="input-checkbox" checked></input>Male</label>
<label for="gender">
<input id="Female" type="radio" name="gender" class="input-checkbox"></input>Female</label>
<label for="gender">
<input id="Other" type="radio" name="gender" class="input-checkbox" ></input>Prefer not to disclose</label>
<legend>What Core Curriculum have you explored on our platform, so far?</legend>
<label for="projects">
<input id="web-dev" type="checkbox" name="projects" value="web-dev" class="input-checkbox">Responsive Web Design</input>
<input id="javascript" type="checkbox" name="projects" value="javascript" class="input-checkbox">Javascript Algorithms and Data Structures</label></input>
<input id="front-end" type="checkbox" name="projects" value="front-end" class="input-checkbox">Front End Development</input>
<input id="data-vis" type="checkbox" name="projects" value="data-vis" class="input-checkbox">Data Visualization</input>
<input id="rel-data" type="checkbox" name="projects" value="rel-data" class="input-checkbox">Relational Databases</input>
<input id="back-dev" type="checkbox" name="projects" value="back-dev" class="input-checkbox">Back End Development</input>
<input id="q-a" type="checkbox" name="projects" value="q-a" class="input-checkbox">Quality Assurance</input>
<input id="python" type="checkbox" name="projects" value="python" class="input-checkbox">Scientific Computing with Python</input>
<input id="data-an" type="checkbox" name="projects" value="data-an" class="input-checkbox">Data Analysis with Python</input>
<input id="info-sec" type="checkbox" name="projects" value="info-sec" class="input-checkbox">Information Security</input>
<input id="machine-learning" type="checkbox" name="projects" value="machine-learning" class="input-checkbox">Machine Learning with Python</input>
<input id="algebra" type="checkbox" name="projects" value="algebra" class="input-checkbox">College Algebra with Python</input>
</label>
<legend>Provide a Bio:</legend>
<textarea id="bio" rows="3" cols="40" placeholder="I enjoy coding on the weekends..."></textarea>
<input type="submit" value="Submit"></input>
</form>
</body>
</html>
```I have tried many different CSS formats to remedy this, but haven’t found a solution yet. I took an overseas vacation between the last time I worked on this so I’m a bit fuzzy on all the avenues I took to try and solve this problem.
New contributor
Clayton Lopez is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
3
To properly align the checkboxes, set the container .checkbox-group div to display: flex and flex-direction: column. For spacing, add row-gap: 10px or any of you choice and align-items: flex-start to align on the left side .
h1, p {
margin: 5px;
text-align: center;
font-family: 'Poppins', sans-serif;
}
body {
color: white;
background-color: rgb(51, 0, 0);
font-family: 'Poppins', sans-serif;
}
form {
background-color: rgb(32, 0, 0);
width: 80vw;
margin: 0 auto;
}
input {
background-color: rgb(160, 160, 160);
}
.input-checkbox {
display: inline-block;
margin-right: 0.625rem;
min-height: 1rem;
min-width: 1rem;
}
.checkbox-group {
display: flex;
flex-direction: column;
row-gap: 10px;
align-items: flex-start;
}
input[type="submit"] {
display: block;
width: 60%;
margin: 1em auto;
height: 2em;
font-size: 1.1rem;
background-color: rgb(160, 160, 160);
border-color: white;
min-width: 300px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Survey Form</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 id="title">freeCodeCamp Survey Form</h1>
<p id="description">Please answer below to help us improve our platform.</p>
<hr>
<form id="survey-form">
<label for="name">First and Last Name</label>
<input id="name" type="text" name="name" placeholder="Enter your Name" required></input>
<label for="email">Email Address</label>
<input id="email" type="email" name="email" placeholder="Enter your Email" required></input>
<label for="age">Age (optional)</label>
<input id="number" type="number" min="13" max="120" name="age" placeholder="##"></input>
<label for="referrer">How did you hear about us?</label>
<select id="referrer" name="referrer">
<option value="">(select one)</option>
<option value="1">Youtube</option>
<option value="2">TikTok</option>
<option value="3">Online Forum</option>
<option value="4">Other</option>
</select>
<legend>Select Your Gender:</legend>
<label for="gender">
<input id="Male" type="radio" name="gender" class="input-checkbox" checked>Male</input>
</label>
<label for="gender">
<input id="Female" type="radio" name="gender" class="input-checkbox">Female</input>
</label>
<label for="gender">
<input id="Other" type="radio" name="gender" class="input-checkbox">Prefer not to disclose</input>
</label>
<legend>What Core Curriculum have you explored on our platform, so far?</legend>
<div class="checkbox-group">
<label for="web-dev">
<input id="web-dev" type="checkbox" name="projects" value="web-dev" class="input-checkbox">Responsive Web Design</input>
</label>
<label for="javascript">
<input id="javascript" type="checkbox" name="projects" value="javascript" class="input-checkbox">Javascript Algorithms and Data Structures</input>
</label>
<label for="front-end">
<input id="front-end" type="checkbox" name="projects" value="front-end" class="input-checkbox">Front End Development</input>
</label>
<label for="data-vis">
<input id="data-vis" type="checkbox" name="projects" value="data-vis" class="input-checkbox">Data Visualization</input>
</label>
<label for="rel-data">
<input id="rel-data" type="checkbox" name="projects" value="rel-data" class="input-checkbox">Relational Databases</input>
</label>
<label for="back-dev">
<input id="back-dev" type="checkbox" name="projects" value="back-dev" class="input-checkbox">Back End Development</input>
</label>
<label for="q-a">
<input id="q-a" type="checkbox" name="projects" value="q-a" class="input-checkbox">Quality Assurance</input>
</label>
<label for="python">
<input id="python" type="checkbox" name="projects" value="python" class="input-checkbox">Scientific Computing with Python</input>
</label>
<label for="data-an">
<input id="data-an" type="checkbox" name="projects" value="data-an" class="input-checkbox">Data Analysis with Python</input>
</label>
<label for="info-sec">
<input id="info-sec" type="checkbox" name="projects" value="info-sec" class="input-checkbox">Information Security</input>
</label>
<label for="machine-learning">
<input id="machine-learning" type="checkbox" name="projects" value="machine-learning" class="input-checkbox">Machine Learning with Python</input>
</label>
<label for="algebra">
<input id="algebra" type="checkbox" name="projects" value="algebra" class="input-checkbox">College Algebra with Python</input>
</label>
</div>
<legend>Provide a Bio:</legend>
<textarea id="bio" rows="3" cols="40" placeholder="I enjoy coding on the weekends..."></textarea>
<input type="submit" value="Submit"></input>
</form>
</body>
</html>
One way to solve this issue would to just add br tag. The br tag inserts a single line break. So I just added br tag after each label to insert a single line break and also added br in some places to make some space between them. Also I didn’t make any changes to your css.
here is the code I hope this helps:
h1,p {
margin: 5px;
text-align: center;
font-family: 'Poppins', sans-serif;
}
body {
color: white;
background-color: rgb(51, 0, 0);
font-family: 'Poppins', sans-serif;
}
form {
background-color: rgb(32,0,0);
width: 80vw;
margin: 0 auto;
}
label {
display: block;
}
input {
background-color: rgb(160, 160, 160);
}
.input-checkbox {
display: inline-block;
margin-right: 0.625rem;
min-height: 1 rem;
min-width: 1 rem;
}
input[type="submit"] {
display: block;
width: 60%;
margin: 1em auto;
height: 2em;
font-size: 1.1rem;
background-color: rgb(160, 160, 160);
border-color: white;
min-width: 300px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Survey Form</title>
<link rel="stylesheet" href="styles.css">
</head>
<h1 id="title">freeCodeCamp Survey Form
</h1>
<p id="description">Please answer below to help us improve our platform.</p>
<hr>
<body>
<form id="survey-form">
<label for="name">First and Last Name</label>
<input id="name" type="text" name="name" placeholder="Enter your Name" required></input>
<br> <!-- Added this line so the next labels can be on the second line -->
<br> <!--Added another br so I can make some space between this label and other label-->
<label for="email">Email Address</label>
<input id="email" type="email" name="email" placeholder="Enter your Email" required></input>
<br> <!-- Added this line so the next labels can be on the second line -->
<br> <!--Added another br so I can make some space between this label and other label-->
<label for="age">Age (optional)</label>
<input id id="number" type="number" min="13" max="120" name="age" placeholder="##"></input>
<br> <!-- Added this line so the next labels can be on the second line -->
<br> <!--Added another br so I can make some space between this label and other label-->
<label for="referrer">How did you hear about us?</label>
<select id="referrer" name="referrer">
<option value="">(select one)</option>
<option value="1">Youtube</option>
<option value="2">TikTok</option>
<option value="3">Online Forum</option>
<option value="4">Other</option>
</select>
<br> <!-- Added this line so the next labels can be on the second line -->
<br> <!--Added another br so I can make some space between this label and other label-->
<legend>Select Your Gender:</legend>
<label for="gender">
<input id="Male" type="radio" name="gender" class="input-checkbox" checked></input>Male</label>
<label for="gender">
<input id="Female" type="radio" name="gender" class="input-checkbox"></input>Female</label>
<label for="gender">
<input id="Other" type="radio" name="gender" class="input-checkbox" ></input>Prefer not to disclose</label>
<br> <!-- Added this line so the next labels can be on the second line -->
<br> <!--Added another br so I can make some space between this label and other label-->
<legend>What Core Curriculum have you explored on our platform, so far?</legend>
<br> <!-- Added this line so the next labels can be on the second line -->
<label for="projects">
<input id="web-dev" type="checkbox" name="projects" value="web-dev" class="input-checkbox">
<label for="web-dev">Responsive Web Design</label>
<br>
<input id="javascript" type="checkbox" name="projects" value="javascript" class="input-checkbox">
<label for="javascript">Javascript Algorithms and Data Structures</label>
<br>
<input id="front-end" type="checkbox" name="projects" value="front-end" class="input-checkbox">
<label for="front-end">Front End Development</label>
<br>
<input id="data-vis" type="checkbox" name="projects" value="data-vis" class="input-checkbox">
<label for="data-vis">Data Visualization</label>
<br>
<input id="rel-data" type="checkbox" name="projects" value="rel-data" class="input-checkbox">
<label for="rel-data">Relational Databases</label>
<br>
<input id="back-dev" type="checkbox" name="projects" value="back-dev" class="input-checkbox">
<label for="back-dev">Back End Development</label>
<br>
<input id="q-a" type="checkbox" name="projects" value="q-a" class="input-checkbox">
<label for="q-a">Quality Assurance</label>
<br>
<input id="python" type="checkbox" name="projects" value="python" class="input-checkbox">
<label for="python">Scientific Computing with Python</label>
<br>
<input id="data-an" type="checkbox" name="projects" value="data-an" class="input-checkbox">
<label for="data-an">Data Analysis with Python</label>
<br>
<input id="info-sec" type="checkbox" name="projects" value="info-sec" class="input-checkbox">
<label for="info-sec">Information Security</label>
<br>
<input id="machine-learning" type="checkbox" name="projects" value="machine-learning" class="input-checkbox">
<label for="machine-learning">Machine Learning with Python</label>
<br>
<input id="algebra" type="checkbox" name="projects" value="algebra" class="input-checkbox">
<label for="algebra">College Algebra with Python</label>
<br>
</label>
<br> <!-- Added this line so the next labels can be on the second line -->
<br> <!--Added another br so I can make some space between this label and other label-->
<legend>Provide a Bio:</legend>
<br>
<textarea id="bio" rows="3" cols="40" placeholder="I enjoy coding on the weekends..."></textarea>
<br>
<input type="submit" value="Submit"></input>
</form>
</body>
</html>
New contributor
Amy is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
1