Tell us what’s happening: I cannot seem to get the radio buttons and labels, as well as the checkboxes and labels to align on the same line. The other issue I am having is the size of the radio buttons and check boxes look larger than they should be and were in the example project.
Your code so far
WARNING
The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.
You will need to take an additional step here so the code you wrote presents in an easy to read format.
Please copy/paste all the editor code showing in the challenge from where you just linked.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Afterlife Gaming Creator Form</title>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 id="title">Afterlife Gaming Creator Form</h1>
<p id="description"><strong>New content creators please register here</strong></p>
<form id="survey-form">
<fieldset>
<label id="name-label" for="name">Please enter your name: <input id="name" type="text" placeholder="Please enter your name"required></label>
<label id="email-label" for="email">Please enter your email address: <input id="email" type="email" placeholder="Please enter your email" required></label>
<label id="number-label" for="number">Age <input id="number" type="number" min="16" max="120" placeholder="Please enter your age"></label>
</fieldset>
<fieldset>
<label for="streamer"> <input id="streamer" class="inline" type="radio" name="stream-support" value="streamer" checked requried> Streamer</label>
<label for="support"> <input id="support" class="inline" type="radio" name="stream-support" Value="suport" requried> Supporter</label>
</fieldset>
<fieldset id="">
<label for="affliation"> <input id="affliate" class="inline" type="radio" name="affliate-partner" value="affliation" checked requried> Affliation</label>
<label for="partnership"> <input id="partner" class="inline" type="radio" name="affliate-partner" value="partnership" requried> Partnership</label>
</fieldset>
<fieldset>
<label>How did you hear about us?
<select id="dropdown" name="dropdown">
<option value="">(select one)</option>
<option value="1">YouTube</option>
<option value="2">Twitter(X)</option>
<option value="3">Discord</option>
<option value="4">TikTok</option>
<option value="5">Other</option> /*only appear when other is selected*/ <input id="explanation" type="text" placeholder="Please Explain" required>
</select>
</label>
</fieldset>
<fieldset>
<input class="platforms" type="checkbox" value="instagram"> <label for="platforms">Instagram</label>
<input class="platforms" type="checkbox" value="kick"> <label for="platforms">Kick</label>
<input class="platforms" type="checkbox" value="snapchat"> <label for="platforms">SnapChat</label>
<input class="platforms" type="checkbox" value="tiktok"> <label for="platforms">TikTok</label>
<input class="platforms" type="checkbox" value="twitch"> <label for="platforms">Twitch</label>
<input class="platforms" type="checkbox" value="twitter"> <label for="platforms">Twitter(X)</label>
<input class="platforms" type="checkbox" value="youtube"> <label for="platforms">YouTube</label>
</fieldset>
<textarea id="bio" placeholder="Please provide a brief summary of yourself..." rows="13" cols="50"></textarea>
<textarea id="content" placeholder="Tell us a little bit about the content you create..." rows="13" cols="50"></textarea>
<textarea id="reason" placeholder="Why do you want to become a member of the Afterlife Team?" rows="13" cols="50"></textarea>
<input id="submit" type="submit" value="Join the Afterlife"></input>
</form>
</body>
<footer>
<strong>
<p>Afterlife Gaming</p>
<p>Est. 2024</p>
</strong>
</footer>
</html>
CSS
body {
width: 100%;
height: 100vh;
margin: 0;
background-color: black;
/*add welcome to the afterlife graphic background-img:*/
font-size: 18px;
color: #ffffff;
}
#title {
text-align: center;
color: red;
}
.inline {
display: inline;
}
fieldset {
border: none;
border-bottom: 3px solid #00ff00;
}
fieldset:last-of-type {
border-bottom: none;
}
form {
width: 70vw;
max-width: 500px;
min-width: 300px;
margin: 0 auto;
padding-bottom: 2em;
}
h1, p {
margin: 1em auto;
}
input,
textarea,
select {
margin: 10px 0 0 0;
width: 100%;
min-height: 2em;
}
label {
display: block;
margin: .5rem 0;
}
p {
text-align: center;
color:#00ff00;
font-size: 20px;
}
placeholder {
color: white;
}
footer p {
font-size: 12px;
}
textarea {
background-color: #2a2a3b;
border: 1px solid #00ff00;
}
input[type="submit"] {
display: block;
width: 60%;
margin: 1em auto;
height: 2em;
font-size: 1.1rem;
color: white;
background-color: #ff0000;
border-color: #00ff00;
min-width: 300px;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36 Edg/119.0.0.0
Challenge Information:
Survey Form - Build a Survey Form
