Hello,
i have a problem with my radio bottom, i did it exactly like how they teached it in the course before but for some reason the buttom is placed on the right side of the text. How can i put it on the left side of the text.
thank you
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>Survey Form</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 id="title">Your favourite home scent </h1>
<p id="description">a survey by Its Magaki</p>
<form id="survey-form">
<fieldset>
<label id="name-label">Name <input id="name" type="text" name="name" placeholder="Maria Hofer" required/></label>
<label id="number-label">Age <input id="number" type="number" name="age" pattern="[0-9]" min="13" max="100" alt="HTML5 validation error" placeholder="21" required/></label>
<label id="email-label">E-mail <input id="email" type="email" name="email" alt="HTML5 validation error" placeholder="maria.hofer@hotmail.com" required/></label>
</fieldset>
<fieldset>
<label for="dropdown">Favourite way to scent your home
<select id="dropdown">
<option value="">select one</option>
<option value="1">none</option>
<option value="2">Scented Candles</option>
<option value="3">Reed Diffusers</option>
<option value="4">Electric Diffusers</option>
<option value="5">Room Sprays</option>
</select>
</label>
<label>Which scent suites your home the most</label>
<label for="floral-notes">Floral Notes<input id="floral-notes" type="radio" name="scent-notes" class="inline" value="Folral Notes"></label>
<label for="oriental-notes">Oriental Notes<input id="oriental-notes" type="radio" name="scent-notes" class="inline" value="Oriental Notes"></label>
<label for="woody-notes">Woody Notes<input id="woody-notes" type="radio" name="scent-notes" class="inline" value="Woody Notes"></label>
<label for="fresh-notes">Fresh Notes<input id="fresh-notes" type="radio" name="scent-notes" class="inline" value="Fresh Notes"></label>
<label for="news"><input id="news" type="checkbox" required name="news" class="inline" value="newsletter">I want to be informed of the latest news and candles</label>
<label for="terms-and-conditions"><input id="terms-and-conditions" type="checkbox" name="terms-and-conditions" class="inline" value="terms-and-conditions" required>I accept the terms and conditions</label>
</fieldset>
<fieldset>
<label for="favourite-scent">What is your favourite scent?:
<textarea id="favourite-scent" name="favourite-scent" rows="3" cols="30"></textarea>
</label>
</fieldset>
<input type="submit" value="Submit" id="submit"/>
</form>
</body>
</html>
/* file: styles.css */
body {
width: 100%;
height: 100vh;
margin: 0;
background-color: #e8d9cc;
font-size: 18px;
}
h1, p {
text-align: center;
margin: 1em auto;
}
form {
width: 60vw;
max-width: 500px;
min-width: 300px;
margin: 0 auto;
padding-bottom: 2em;
}
label {
display: block;
margin: 1rem 0;
}
input, select {
width: 100%;
margin: 10px 0 0 0;
min-height: 2em;
}
.inline {
width: unset;
margin: 0 0.5em 0 0;
vertical-align: middle;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36
Challenge: Survey Form - Build a Survey Form
Link to the challenge: