Tell us what’s happening:
Describe your issue in detail here.
Hi,
I am trying to get the radio and checkbox buttons along with the labels to align. Does anyone have any suggestions? I tried to use unset to remove the css from the input css used prior; however this didn’t solve the problem. Thank you in advance for any help. Just for context: this is the first time I have ever written code and shared it online, I understand html crystal clearly but not so much css, I am happy to take any suggestions as well!
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width", initial scale=1.0">
<title> freeCodeCamp Survey Form </title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 id="title">freeCodeCamp Survey Form</h1>
<p id="description">Thank you for taking your time to help us improve the platform</p>
<form id="survey-form" method="post" action='https://register-demo.freecodecamp.org'>
<fieldset><label for="name" id="name-label">Name <input type="text" required placeholder="Enter your name" id="name"></input></label>
<label for="email" id="email-label">Email <input type="email" id="email" required placeholder="Enter your Email" ></input></label>
<label for="number" id="number-label">Age (optional) <input type="number" id="number" placeholder="Age" min="18" max="120"></input></label>
</fieldset>
<fieldset>
<label>Which option best describes your current role? <select id="dropdown"> <option>Select your 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>
<label>Would you recommend freeCodeCamp to a friend?
<input class="inline-radio" type="radio" name="recommend"value="Definitely">Definitely
<input class="inline-radio"
type="radio" name="recommend"value="Maybe">Maybe
<input class="inline-radio"
type="radio" name="recommend" value="Not sure">Not sure</input></label>
</fieldset>
<fieldset>
<label>What is your favorite feature of freeCodeCamp?
<select>
<option>Select an option</option>
<option>Challenges</option>
<option>Projects</option>
<option>Community</option>
<option>Open Source</option>
</select>
</label>
</fieldset>
<fieldset>
<label>What would you like to see improved? (Check all that apply)
<input type="checkbox" value="Front-endProjects" class="inline-checkbox">Front-end Projects</input>
<input type="checkbox" value="Back-end Projects"class="inline-checkbox">Back-end Projects</input>
<input type="checkbox" value="Data Visualization" class="inline-checkbox">Data Visualization
<input type="checkbox" value="Challenges" class="inline-checkbox">Challenges
<input type="checkbox" value="Open Source Community" class="inline-checkbox">Open Source
<input type="checkbox" value="Gitter help rooms" class="inline-checkbox">Gitter help rooms
<input type="checkbox" value="Videos" class="inline-checkbox">Videos
<input type="checkbox" value="City Meetups" class="inline-checkbox">City Meetups
<input type="checkbox" value="Wiki" class="inline-checkbox">Wiki
<input value="Forum" type="checkbox" class="inline-checkbox">Forum</input">
<input type="checkbox" value="Additional Courses" class="inline-checkbox">Additional Courses
</label>
</fieldset>
<fieldset>
<label>Any comments or suggestions?<textarea placeholder="Enter your comment here..." rows="5" cols="30"></textarea></label>
</fieldset>
<input type="submit" id="submit">
</form>
</body>
</html>
/* file: styles.css */
body
{
background-repeat:no-repeat;
background-size:cover;
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-position:center;
width:100%;
height:350vh;
background:cover;
color:white;
font-family:sans-serif; font-size:24px;
margin:0;
}
h1,p {
margin:1em auto; text-align:center;
}
h1{
font-weight:400;
}
p{
font-style:italic;
font-weight:100;
}
form{
margin:10px auto;
max-width:800px;
min-width:300px;
width:50vw;
height:90%;
background-color: rgba(27, 27, 50, 0.8);
border-radius:10px;
}
fieldset {
border: none;
padding:2rem;
margin-bottom:-4rem;
}
label {
display:block;
padding:10px;
margin: 0.5rem 0;
}
input,textarea,select{
width:100%;
height:2rem;
margin:10px 0 0 0;
}
input[type="checkbox"],input[type="radio"]{
margin:0;
height:1rem;
}
textarea{
margin-bottom:50px;
min-height:7em;
}
input[type="submit"]{ font-family:Tahoma;
color:white;
font-size:1.1rem;
height:2.5em;
max-width:43vw;
margin:10px 0 0 50px;
padding:5px 0;
border-radius:5px; background-color:green;
}
.inline-radio, .inline-checkbox {
width:60%;
}
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36
Challenge: Survey Form - Build a Survey Form
Link to the challenge: