Tell us what’s happening:
Hello, I have successfully completed all the tests for the LAB, however, its really bugging me that my checkboxes and their text are not aligned. I’ve tried lots of methods (flexbox, justify-content, align-content) and they’ll move everywhere but inline next to eachother!
Please can someone help spare me hours more reading as my brain clearly isn’t computing this one! And yes, I have read and compared my code to other answers on the forum and online but I’m just not getting it :')
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>Louise's Portfolio Survey</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<fieldset>
<h1 id="title">Louise's Portfolio Survey</h1>
<p id="description">Thank you for viewing my portfolio, please take a moment to provide me with any feedback 🙂</p>
</fieldset>
<br>
<form id="survey-form" name="survey-form" method="post">
<fieldset>
<label for="name" id="name-label">Your name: <input id="name" name="name" type="text" placeholder="your name..." required /></label>
<label for="email" id="email-label" > Your email:</label>
<input type="email" id="email" pattern="hello@gmail.com" size="20" required placeholder="hello@gmail.com">
<label for="number" id="number-label">On a scale of 1-10 how would you rate my portfolio? (1=amature...10=interview ready)</label>
<input type="number" id="number"name="number" placeholder="enter number here" min="1" max="10" required>
<label for="radio"><input id="radio" type="radio" name="dk/no" class="inline" value='DK' checked /> I don't know</label>
<label for="radio"><input id="radio" type="radio" name="dk/no" class="inline" value="no"/>I'd rather not answer this one</label>
<br>
<br>
<label for="bio">Provide any additional feedback here:
<textarea id="feedback" name="feedback" rows="10" cols="30" placeholder="I liked...but you could do with improving.."></textarea>
<label for="dropdown" id="occupation" >Do you work in tech?</label>
<select id="dropdown">
<option value="yes">Yes</option>
<option value="hobby">No, but its a hobby</option>
<option value="none">Neither</option>
</select>
<label
for="career" id="career-label">What is/are your main area(s) of expertise?</label><br>
<input type="checkbox" id="c1" name="c1" value="AI" ><label for="c1" type="checkbox">AI & Machine Learning</label><br>
<input type="checkbox" id="c2" name="c2" value="DATA"><label for="c2">Data Science & Analytics</label><br>
<input type="checkbox" id="c3" name="c3" value="CLOUD">
<label for="c3">Cloud Computing</label><br>
<input type="checkbox" id="c4" name="c4" value="CYBER">
<label for="c4">Cybersecurity</label><br>
<input type="checkbox" id="c5" name="c5" value="WEB">
<label for="c5">Web Development</label><br>
<input type="checkbox" id="c6" name="c6" value="SOFTPROG">
<label for="c6">Software Development & Programming</label><br>
<label for="other" id="other-label" >Other:<input id="other" name="other" type="text" placeholder="E.G. Front end develpment..."/></label><br>
<br>
<label for="Y/N" id="Y/N">Would you recommend me, or consider me, for a job in the tech industry?
<label for="radio"><input id="radio" type="radio" name="Y/N" class="inline" value='Y' />Yes</label>
<label for="radio"><input id="radio" type="radio" name="Y/N" class="inline" value="N">No, not yet</label>
<br>
</fieldset>
<input type="submit" id="submit" value="Submit" />
</form>
</body>
</html>
/* file: styles.css */
body {
background-image:url(https://i0.wp.com/wearethesaltbox.co.uk/wp-content/uploads/2023/04/Untitled-850-%C3%97-560px.png?fit=850%2C560&ssl=1);background-repeat: no-repeat;background-attachment: fixed;
background-size: cover;
width: 100%;
height: 100vh;
margin: 25px auto;
color: #f5f6f7;
font-family: monospace;
font-size: 16px; text-align: center
}
h1, p {
margin: 1em auto;
text-align: center;}
form {
width: 60vw;
max-width: 500px;
min-width: 300px;
margin: 0 auto;
padding-bottom: 2em;
}
fieldset {
border: none;
padding: 2rem 0;
border-bottom: 3px solid;background: linear-gradient( 40deg, pink, violet);
}
label { display: block; margin: 0.5rem 0; } input, textarea, select { margin: 10px 0 0 0; width: 95%; min-height: 2em; } input, textarea {border: 1px solid; background-color: white; color: grey } .inline { width: unset; margin: 0 0.5em 0 0; vertical-align: middle; } input[type="submit"] { display: block; width: 60%; margin: 1em auto; height: 2em; font-size: 1.1rem; background-color: #ffffff; border-color: black; min-width: 300px; }
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/140.0.0.0 Safari/537.36
Challenge Information:
Survey Form - Build a Survey Form
thank you 