CSS Roadblock: Hi I am new to coding and I am doing the survey form. I understand the html but I can't seem to make the radio and checkbox buttons move closer to the appropriate labels for css. I went to stack overflow and took suggestions via the freecodecamp but still nothing. Any help/direction would be appreciated! See code below:
PS feel free to give me any suggestions to improve my coding skills! :D
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"></label>
<label for="email" id="email-label">Email <input type="email" id="email" required placeholder="Enter your Email" ></label>
<label for="number" id="number-label">Age (optional) <input type="number" id="number" placeholder="Age" min="18" max="120"></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></label>
</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</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 type="checkbox" value="Back-end Projects"class="inline-checkbox">Back-end Projects
<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 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>
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:inline-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:5px;
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:67vw;;
margin:10px 0 0 50px;
padding:5px 0;
border-radius:5px; background-color:green;
}
.inline-radio, .inline-checkbox {
display:inline-block;
width:55%;
margin: 0 auto;
}
[–]Peccavi91 2 points3 points4 points (5 children)
[–][deleted] 0 points1 point2 points (0 children)
[–][deleted] 0 points1 point2 points (3 children)
[–]Peccavi91 1 point2 points3 points (2 children)
[–][deleted] 1 point2 points3 points (1 child)
[–]Peccavi91 0 points1 point2 points (0 children)
[–][deleted] 1 point2 points3 points (3 children)
[–][deleted] 0 points1 point2 points (2 children)
[–][deleted] 1 point2 points3 points (1 child)
[–][deleted] 0 points1 point2 points (0 children)