I have a feeling it was like below my latest round, I’m not sure though.
Why does the behaviour of the first radio buttons differs from the rest, it seems it’s affected by something, the label appears on the bottom of the input and not on the right side like the other two.
<head>
<title>Page with a form</title>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet"></link>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
</head>
<body>
<div>
<h1 id='title'>Andromedas survey form
</h1>
<p id="description">
We would appreciate if you fill in the form
</p>
</div>
<form id="survey-form">
<div class='container'>
<label id='name' for='name'>Name</label>
<input id='name-label' type='text' name='namn' required='required' placeholder='Enter your name'/>
<label id='email' for='email'>Email</label>
<input id='email-label' type='text' name='email' required='required' placeholder='Enter your email'/>
<label id='number' for='age'>Age (optional)</label>
<input id='number-label' type='number' name='age' min='10' max='99' placeholder='99'>
<label id='dropdown' for='role'>Which option best describes your current role?</label>
<select id='dropd' name='role' placeholder='Select current role'>
<option value='select current role'>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>
</div>
<!-- Radio buttons -->
<div>
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" value="indoor">Indoor</label>
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" value="indoor">Indoor</label>
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" value="indoor">Indoor</label>
</div>
</form>
</body>
</html>
html {
background: url('https://images.pexels.com/photos/7598019/pexels-photo-7598019.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');
opacity: 0.7;
}
body {
text-align: center;
}
#title {
text-align: center;
font-family: 'Open+Sans';
font-size: 40px;
margin-bottom: 0;
padding: 0;
}
#description {
text-align: center;
margin: 5px 0 40px;
font-size: 18px;
}
#survey-form {
display: inline-block;
padding: 30px 30px;
background-color: hsl(10, 90%, 90%);
}
.container {
display: flex;
flex-direction: column;
}
#name-label,
#email-label,
#number-label {
padding-bottom: 15px;
font-size: 20px;
font-family: arial;
color:
}
#name,
#email,
#number {
font-size: 20px;
font-family: arial;
margin: 20px 0 7px 0;
}
#dropdown {
width: 100%;
font-size: 20px;
font-family: arial;
margin: 20px 0 7px 0;
}
#dropd {
width: 100%;
height: 40px;
margin-bottom: 30px;
}