Hi, I am absolutely struggling to get the checkbox values in the same line as the checkbox whilst also having different checkboxes and their respective values on the same line.
The css i have so far for this porblem:
.block{
display: block}
.padding{padding-bottom:px}
.left,.right{display:inline}
Thank you!
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head><link rel="stylesheet" href="styles.css"><head>
<h1 id="title">freeCodeCamp Survey Form</h1>
<p id="description" class="description">Thank you for taking the time to help us improve the platform</p>
<body>
<form id="survey-form">
<!-- first field -->
<fieldset>
<label class="block" for="name" id="name-label" >Name<input class="block" id = "name" type="text" required placeholder="Enter your name"><label>
<label class="block" for="email" id="email-label" >Email<input class="block"id= "email" type= "text" type="email"
required placeholder="Enter your email"><label>
<label class="block" for="age" id="age-label" >Age(optional)<input class="block" id="age" type="number" placeholder="Enter your age" ><label>
</fieldset>
<!-- second field-->
<fieldset>
<label class="block">Which option best describes your current role?<select class="block" id="dropdown">
<option value ="">Select current role</option>
<option value ="student">Student</option>
<option value ="full-time-job">Full Time Job</option>
<option value ="full-time-learner">Full Time Learner</option>
<option value ="prefer-not-to-say">Prefer not to say</option>
<option value ="other">Other</option>
</label>
</fieldset>
<!--Third field -->
<fieldset>
<label class="block" ><input type="radio" id="definitely" name="recommendation" >Definitely</label>
<label class="block" ><input type="radio" id="maybe" name="recommendation" >Maybe</label>
<label class="block"><input type="radio" id="not-sure" name="recommendation" >Not sure</label>
</fieldset>
<!--Fourth fieldset-->
<fieldset>
<p class="checkbox-title">What would you like to see improved. Check all that apply</p>
<input value="front-end-projects" id="front-end-projects" type="checkbox" ><label for="front-end-projects" >Front End Projects </label>
<input id="back-end-projects"
value="back-end-projects"type="checkbox"
><label class="right" for="back-end-projects">Back End Projects </label>
<input value="data-visualisation" type="checkbox"><label for="data-visualisation">Data visualisation </label>
<input id="challenges" value="challenges" type="checkbox"
class"padding"><label for="challenges">Challenges </label>
<input id="open-source-community" value="open-source-community" type="checkbox"><label for="open-source-community">Open Source Community </label>
<input id="glitter-help-rooms" value="glitter-help-rooms" type="checkbox"><label for="glitter-help-rooms">Glitter help rooms </label>
<input id="videos" value="videos" type="checkbox"><label for="videos">Videos</label>
<input id="city-meetups" value="city-meetups" type="checkbox"><label for="city-meetups">City meetups </label>
<label for="wiki">Wiki<input id="wiki" value="wiki" type="checkbox"></label>
<input id="forum" value="forum" type="checkbox"><label for="forum">Forum </label>
<input id="additional-courses" value="additional-courses" type="checkbox"><label for="additional-courses">Additional courses </label>
</fieldset>
<!--Fifth fieldset-->
<fieldset>
<label for="bio">Any comments or suggestions
<textarea id="comments-and-suggestions" name="comments-and-suggestions" rows="4" cols="40" placeholder="Enter your comment here..."></textarea>
</label>
<input type="submit" value="Submit" />
</fieldset>
</form>
</body>
</body>
</html>
/* file: styles.css */
body{ background-image: url(https://st4.depositphotos.com/10839834/21083/v/450/depositphotos_210836720-stock-illustration-streaming-binary-code-background-cyber.jpg);
background-repeat: no-repeat;
background-size: cover;
color:white;
font-family: sans-serif;
font-size: 25px
}
h1{font-size: 30px;}
.description{
font-size: 22px;
}
h1, .description{
font-family: palatino;
text-align: center;
margin: 0 auto;
}
form{background-color:rgba(55, 10, 97,0.8);
max-width: 450px;
min-width: 300px;
margin: 0 auto
}
.block{
display: block}
.padding{padding-bottom:px}
.left,.right{display:inline}
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36
Challenge: Survey Form - Build a Survey Form
Link to the challenge: