I don't really know why it behaves like that. I tried to prevent checkbox label from wrapping to opposite side of page using display: inline-block; and it works but for some reason two checkboxes stays in first line and the rest goes down.
body {
width: 100%;
height: 100vh;
margin: 0;
font-family: Tahoma;
background-color: #1d3557;
font-size: 16px;
color: white;
}
h1, p {
margin: 1em auto;
text-align: center;
}
form {
width: 60vw;
min-width: 300px;
max-width: 500px;
margin: 0 auto;
/* background-color: #F7DBA7; */
}
label {
display: block;
}
.in-line {
display: inline-block;
margin: 0 5px 0 0;
}
input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]), textarea, select {
width: 100%;
margin: 5px 0 10px 0;
min-height: 2em;
background-color: #457b9d;
border: 1px solid #1d3557;
color: white;
}
fieldset {
border: 0;
border-bottom: 2px solid #e63946;
margin: auto;
}
.submit {
display: block;
width: 60%;
height: 2em;
margin: 1em auto;
background-color: #457b9d;
border-color: #1d3557;
font-size: 1.1rem;
color: white;
font-family: tahoma;
}
::placeholder {
color: white;
}
fieldset:first-of-type {
border-top: 2px solid #e63946
}
.text-size {
font-size: 0.9em;
}
input[type="checkbox"] {
vertical-align: middle;
position: relative;
bottom: 1px;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Customer Survey</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 id="title">Byens Pizza House Customer Survey</h1>
<p id="description">We are happy that you chose us! Please answer these short questions and help us improve for you!</p>
<!-- SURVEY -->
<form id="survey-form" method="post" action="">
<!-- NAME/EMAIL/GUESTS -->
<fieldset>
<label id="name-label" for="name-label">Your name: <input id="name" name="name-label" type="text" placeholder="James Smith" required></label>
<label id="email-label" for="email-label">Email: <input id="email" name="email-label" type="email" placeholder="example@domain.com" required></label>
<label id="number-label" for="number-label">Number of guests: <input id="number" name="number-label" type="number" min="1" max="20" placeholder="2" required></label>
</fieldset>
<!-- TYPE OF FOOD -->
<fieldset>
Type of food you ordered:
<label for="type-of-food" class="text-size">
<label class="in-line" for="pizza"><input id="pizza" type="checkbox" name="type-of-food" value="Pizza" checked>Pizza</label>
<label class="in-line" for="burgers"><input id="burgers" type="checkbox" name="type-of-food" value="Burgers">Burgers</label>
<label class="in-line" for="pasta"><input id="pasta" type="checkbox" name="type-of-food" value="Pasta">Pasta
<label class="in-line" for="seafood"><input id="seafood" type="checkbox" name="type-of-food" value="Seafood">Seafood</label>
<label class="in-line" for="sandwiches"><input id="sandwiches" type="checkbox" name="type-of-food" value="Sandwiches">Sandwiches</label>
<label class="in-line" for="salads"><input id="salads" type="checkbox" name="type-of-food" value="Salads">Salads</label>
<label class="in-line" for="desserts"><input id="desserts" type="checkbox" name="type-of-food" value="Desserts">Desserts</label>
<label class="in-line" for="beverage"><input id="beverage" type="checkbox" name="type-of-food" value="Beverage">Beverage</label>
</label>
</fieldset>
<!-- DELI/PICKUP/INSIDE -->
<fieldset>
Delivery method:
<label for="delivery" class="text-size"><input id="delivery" type="radio" name="delivery-method" value="delivery" checked> Delivery</label>
<label for="pickup" class="text-size"><input id="pickup" type="radio" name="delivery-method" value="pickup"> Pickup</label>
<label for="inside" class="text-size"><input id="inside" type="radio" name="delivery-method" value="inside"> Inside</label>
</fieldset>
<!-- COMMENT/REFERRER/RATE -->
<fieldset>
<label for="comment">Any thoughts?: <textarea id="comment" name="comment" rows="3" cols="30" placeholder="I liked spicy menu and choice of beverage..."></textarea></label>
<label for="referrer">How did you hear about us?
<select id="referrer" name="referrer">
<option value="">(select one)</option>
<option value="1">Social Media</option>
<option value="2">From a friend</option>
<option value="3">Leaflet</option>
<option value="4">Other</option>
</select>
</label>
<label for="satisfaction">Are you satisfied with our service?
<select id="dropdown" name="satisfaction">
<option value="">(select one)</option>
<option value="1">I am very satisfied!</option>
<option value="2">Service was ok.</option>
<option value="3">Not satisfied nor dissatisfied.</option>
<option value="4">I am dissatisfied.</option>
<option value="5">Sevice was terrible.</option>
</select>
</label>
</fieldset>
<label><input id="submit" type="submit" value="Submit" class="submit"></label>
</form>
</body>
</html>Im working on my first learning project and don't know any possible solution for this.
Aucun commentaire:
Enregistrer un commentaire