Hello, I’m currently stuck on something very trivial (most likely has an easy fix, but I can’t seem to solve it). I would like to be able to align the “Activity x” text on the right of the checkboxes. However, I’m not sure on how to do this.
Any help is appreciated!
**Your code so far**
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div>
<h1 id="title">Survey form</h1>
<p id="description">This is a survey to gather information.</p>
</div>
<form id="survey-form" action="https://www.freecodecamp.org/">
<fieldset>
<label id="name-label">Enter Your Name: <input type="text" id="name" required name="name" placeholder="John Doe"></label>
<label id="email-label">Enter Your Email: <input type="email" id="email" required name="email" placeholder="JohnDoe@gmail.com">
</label>
<label id="number-label">Enter Your Age (Years): <input type="number" id="age" required name="age" min="13" max="120" placeholder="18">
</label>
<label>Select Your Gender:
<select placeholder="(select one)">
<option>(select one)</option>
<option>Male</option>
<option>Female</option>
<option>Non-Binary</option>
<option>Other</option>
<option>Prefer not to say..</option>
</select>
</fieldset>
<fieldset>
<p class="which-activities"> Which of these activities did you perform?</p>
<div class="activities">
<label><input type="checkbox" value="1"/> Swimming</label>
<label> <input type="checkbox" value="2"/> Attending Breakfast</label>
<label> <input type="checkbox" value="3"/> Movie Night </label>
<label> <input type="checkbox" value="4"/> Shopped in the indoor mall </label>
<label> <input type="checkbox" value="5"/> Went to the zoo (petting) </label>
<label> <input type="checkbox" value="6"/> Went fishing </label>
<label> <input type="checkbox" value="7"/> Went on a tour </label>
</div>
</fieldset>
<fieldset>
</label>
<label>Are You Happy With This Service?
<input type="radio" required name="experience" class="inline">Yes
<input type="radio" required name="experience" class="inline">No
</label>
<label id="feedback">If so, why?
<textarea id="comment" optional rows="5" cols="45" placeholder="I had a bad experience with.."></textarea>
</label>
</fieldset>
<input type="submit" value="Submit" />
</form>
</body>
</html>
css
/* file: styles.css */
*{
margin:0;
padding:0;
}
body{
background-color:#301934;
color:#F9F6EE;
width:100%;
height:100vh;
font-family: 'Josefin Sans', sans-serif;
font-size:16px;
}
#title, p{
margin:1em auto;
text-align:center;
margin-top:1em;
margin-bottom:0.5em;
}
p{
font-size:18px;
}
form{
width:75vh;
max-width:600px;
min-width:300px;
margin: 0 auto;
}
label {
display:block;
margin-top:0.5em auto;
text-align:center;
}
fieldset{
border:0px;
padding:2rem 0px;
}
input, select{
margin:10px 0 0 0;
min-height:2em;
width:100%;
margin-bottom:1em;
}
.inline{
width:unset;
vertical-align:middle;
margin: 0px 5px;
}
fieldset{
border-bottom:1px solid grey ;
}
fieldset:last-of-type{
border:0px;
}
#feedback{
margin-top:10px;
}
#feedback{
display:block;
margin-bottom:em;
}
textarea{
padding-top:0.3em;
margin-top:20px;
margin: 0px auto;
min-height:em;
}
textarea, input, select{
border:0px;
background-color:#213868;
color:#fff;
}
input[type="submit"]{
width:10em;
margin: 0 auto;
display:block;
background-color:#a7a6ba;
border:0px;
}
#comment{
margin-top:1em;
}
input[type="checkbox"]{
width:unset;
vertical-align:middle;
}
#cb{
display:block;
}
.activities{
position:relative;
left:-8.25em;
}
/* NOTES:
- complete the styling for the submit button
- add a bottom line
- add more space at the bottom (below the submit button)
- get rid of the black border
*/```
**Your browser information:**
User Agent is: <code>Mozilla/5.0 (X11; CrOS x86_64 14909.100.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36</code>
**Challenge:** Survey Form - Build a Survey Form
**Link to the challenge:**
https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-survey-form-project/build-a-survey-form
