How do I vertically align the checkboxes and horizontally align the radio buttons with the text? It won't let me post all the related code, so the full code is here.
Also, how do I move the checkboxes closer to the text? I've tried to change margin and padding of the text and the checkboxes, and it didn't work.
.col {
float: left;
display:grid;
margin: 0 30px 0 60px;
width: 400px;
}
.span-col, .terms-col {
display: block
}
.col-2 {
display:grid;
}
input, textarea {
background-color: #2C8F57;
border: 1px solid #2C8F57;
color: #ffffff;
}
input,
textarea,
select {
margin: 10px 0 0 0;
width: 100%;
height: 2em;
max-width: 100%;
border-radius: 4px;
}'''
I pasted all of your code into the Stack Overflow code snippet editor so just hit the big ol blue Run code snippet button below. You'll also see on lines 89-92 that I added some CSS to also align the checkboxes vertically as well. Although, I would suggest moving the checkboxes to the left of the labels and removing those lines, but that's more a presentation thing than an issue you're having. See for example: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_type_checkbox.
input[type="checkbox"], input[type="radio"] adds all of the space on the left and right of the input itself. The checkbox and radio buttons only take up about 20-30px, so that's what I changed for the spacing.input, textarea, select. I removed that 10px margin and it aligns perfectly now.body {
width: 100%;
height: 100vh;
margin: 0;
color: #2BAB65;
font-family: Poppins;
font-size: 16px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-image: url(https://images.unsplash.com/photo-1588666309990-d68f08e3d4a6?q=80&w=1885&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)
};
body::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background-color: #084A25;
}
form {
background: rgba(6, 53, 27, .8);
margin: -50px auto 0;
padding: 10px 20px;
width: 800px;
border-radius: 0 0 8px 8px;
}
.break {
padding-bottom: 35px;
}
.bg {
text-align: center;
margin: 50px auto;
width: 840px;
padding: 5px 0 50px;
opacity: 80%;
background-color: #06351B;
border-radius: 8px 8px 0 0;
}
p {
margin-bottom:-5px;
}
h1 {
font-family: PT Serif;
font-size: 42px;
letter-spacing: 3px;
font-weight: 600px;
margin-top: 1em;
margin-bottom: 10px;
}
.general-info {
margin-bottom: 5px;
display: block;
padding-top:15px;
}
fieldset:first-of-type {
display: block;
margin: 0.5rem 0;
}
fieldset {
margin-bottom:20px;
border-radius: 4px;
border-color: #2C8F57;
border-style: solid;
}
.col {
float: left;
display:grid;
margin: 0 30px 0 60px;
width: 400px;
}
.span-col, .terms-col {
display: block
}
/*.span-col label {
width: 150px;
display: inline-block;
}*/
.col-2 {
display:grid;
}
input, textarea {
background-color: #2C8F57;
border: 1px solid #2C8F57;
color: #ffffff;
}
input,
textarea,
select {
margin: 10px 0 0 0;
width: 100%;
height: 2em;
max-width: 100%;
border-radius: 4px;
}
select {
background-color: #2C8F57;
color: #fff;
}
select:hover {
background-color: #6DDD9E;
box-shadow: 0 0 10px 100px #6DDD9E inset;
}
::placeholder {
color: #C8FFE0;
}
input[type="checkbox"], input[type="radio"] {
/*width: 25%;*/
width: 26px;
display: inline-block;
transform: scale(0.7);
margin: 0;
vertical-align: middle;
}
legend.interest > input {
padding-left: -20px;
}
input[type="submit"] {
display: block;
margin: 2em auto;
height: 2em;
font-size: 1.1rem;
background-color: #2C8F57;
width: 150px;
}
.terms-and-conditions {
text-align: center;
}
a {
color: #6DDD9E;
}
.bottom-break {
padding: 35px;
}<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Book Club Signup</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="break">
</div>
<div class="bg">
<h1 id="title">Book Club Signup</h1>
<p id="description"> Fill out the form below to join the book club.</p>
</div>
<form id="survey-form">
<fieldset>
<label for="name" id="name-label" class="general-info">Full name: <input type="text" id="name" placeholder="Jane Doe" required/></label>
<label for="email" id="email-label" class="general-info">Email: <input type="email" id="email" placeholder="[email protected]" required/></label>
<label for="phone-number" id="phone-number" class="general-info">Phone number (optional for text updates):
</label>
<input type="tel" id="tel" placeholder="678-555-5555"/>
<label for="number" id="number-label" class="general-info">Number of books read per year: <input type="number" id="number" min="1" max="1000" placeholder="50"/></label>
</fieldset>
<fieldset>
<legend for="interest" class="interest">What are you interested in doing in this book club?
</legend>
<div class="col">
<span class="span-col">
<label for="interest" >
Challenges:
</label>
<input class="inline" type="checkbox" value="challenges"/>
</span>
<span class="span-col">
<label for="interest" >Buddy Reads:
</label>
<input class="inline" type="checkbox" value="buddyreads"/>
</span>
</div>
<div class="col-2">
<span class="span-col">
<label for="interest" >Group Reads:
</label>
<input class="inline" type="checkbox" value="groupreads"/>
</span>
<span class="span-col">
<label for="interest" >Book Exchange:
</label>
<input class="inline" type="checkbox" value="bookexchange"/>
</span>
</div>
</fieldset>
<fieldset id="track">
<legend>What do you use to track your books?</legend>
<label for="goodreads"><input id="goodreads" type="radio" name="booktracking" class="inline" value="1" checked /> Goodreads</label>
<label for="storygraph"><input id="storygraph" type="radio" name="booktracking" class="inline" value="2"/> Storygraph</label>
<label for="other" id="inline"><input type="radio" name="booktracking" class="inline" value="3">Other: <input type="text" class="inline"/></label>
</fieldset>
<fieldset>
<legend>Would you like to recommend any challenges to the group?</legend>
<span class="span-col">
<div class="col">
<label for="yes"><input type="radio" name="recommend" class="inline" value="1"/> Yes</label>
</div>
<div class="col-2">
<label for="no"><input id="no" type="radio" name="recommend" class="inline" value="2" checked/> No</label>
</div>
</span>
<br>
</fieldset>
<fieldset>
<legend for="genre">Favorite book genres:
</legend>
<textarea id="genres" name="genres" rows="3" cols="30" placeholder="My favorite genres to read are..."></textarea>
</fieldset>
<fieldset>
<legend for="referrer">How did you hear about us?
</legend>
<select id="dropdown" name="referrer">
<option value="">(select one)</option>
<option value="1">Goodreads</option>
<option value="2">Storygraph</option>
<option value="3">Twitter</option>
<option value="4">Discord</option>
</select>
</fieldset>
<div class="terms-col">
<label for="terms-and-conditions">
<input class="inline" id="terms-and-conditions" type="checkbox" value="terms" required name="terms-and-conditions" /> I accept the <a href="google.com">terms and conditions</a>.
</label>
<input type="submit" value="Submit" id="submit"/>
</div>
</form>
<div class="bottom-break">
</div>
</body>