Hello Everyone,
I went through the responsive web design course over the last couple of weeks and now I am working on the Survey form assignment. I am having a lot of trouble with styling form so that I have the text on top followed by a longer box beneath it ( like the example). Iv been using various resources to try and figure out the right properties to use to get the page they way I want it but am having little luck. If anyone could help out it would be greatly appreciated. I can provide both my html and css thus far if that would be useful. Thank you in advanced!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="formstyle.css">
<title>Air Jordan Form</title>
</head>
<div class="container">
<header>
<h1 id="title" class="text-center">Most Favored Air Jordan</h1>
<div id="description">
<p>Which Jordan model is your favorite?</p>
</div>
</header>
<form id="survey-form">
<div class="form-group" >
<label id="name" for="name">Name</label>
<input
type="text"
id="name-label"
class="form-control"
placeholder="John Doe"
required
>
</div>
<div class="form-group">
<label id="email-label" for="email">Email</label>
<input
type="email"
id="email"
class="form-control"
placeholder="johndoe@gmail.com"
required>
</div>
<div class="form-group">
<label id="number-label" for="number">Silhouette<span class="clue">(optional)</span>
</label>
<input
type="number"
name="Silhouette"
id="number"
min="1"
max="26"
class="form-control"
placeholder="1"
/>
</div>
<div class="form-group">
<label id="text"> Favorite Shoe Color</label>
<input
type="text"
id="shoe-color"
class="form-control"
placeholder="Bred Toe"
/>
</div>
<div class="form-group">
<p>Which Shoe has the most hype?</p>
<select id="dropdown" name="hype" class="form-control" required>
<option disable selected value>Pick One</option>
<option value="retro-1">Jordan 1</option>
<option value="retro-3">Jordan 3</option>
<option value="retro-4">Jordan 4</option>
<option value="retro-11">Jordan 11</option>
<option value="other">Other</option>
</select>
</div>
<div class="form-group">
<p>How many pairs of Jordans do you own?</p>
<label>
<input
name="collection"
value="less-than-5"
type="radio"
class="input-radio"
checked> Less than 5
</label><br>
<label>
<input
name="collection"
value="more-than-5"
type="radio"
class="input-radio">
6 - 9
</label><br>
<label>
<input
name="collection"
value="10+"
type="radio"
class="input-radio">
10+
</label>
</div>
<div class="form-group">
<p>
Do you wear other types of shoes besides Jordans?
</p>
<select id="other-brands" name="otherBrands" class="form-control" required>
<option disable selected value> Select and option</option>
<option value="nike">Yes, Nike</option>
<option value="asics">Yes, Asics</option>
<option value="yeezy">Yes, Yeezy</option>
<option value="adidas">Yes, Adidas</option>
<option value="all">All the above</option>
<option value="only-jordans"> Nah, only Jordans</option>
</select>
</div>
<div class="form-group">
<p>What's the most difficult part about being a sneakerhead?
<span class="clue"> (Check all that apply)</span>
</p>
<label>
<input
name="difficult"
value="retail"
type="checkbox"
class="input-checkbox"
>Copping for retail</label>
</label><br>
<label>
<input
name="difficult"
value="completing-sets"
type="checkbox"
class="input-checkbox"
>Completing sets</label>
</label><br>
<label>
<input
name="difficult"
value="budget"
type="checkbox"
class="input-checkbox"
>Staying within your budget</label>
</label><br>
<label>
<input
name="difficult"
value="partner"
type="checkbox"
class="input-checkbox"
>Wife/ spouse complaing about your habbit</label>
</label><br>
<label>
<input
name="difficult"
value="reseller"
type="checkbox"
class="input-checkbox"
>Having to deal with resellers</label>
</label><br>
<label>
<input
name="difficult"
value="authentic"
type="checkbox"
class="input-checkbox"
>Finding authentic shoes for a reasonable price</label>
</label>
<label>
<input
name="difficult"
value="other"
type="checkbox"
class="input-checkbox"
>Something else</label>
</label>
<div class="form-group">
<p>Comments or suggestions?</p>
<textarea
id="comments"
class="input-textarea"
name="comment"
placeholder="Enter your suggestions here..."
></textarea>
</div>
<div class="form-group">
<button
type="submit"
id="submit"
class="submit-button"
>Submit</button>
</div>
</div>
</form>
</div>
</html>
:root{
background-color: rgba(187, 46, 36, 0.671);
}
.container{
padding-left: 100px;
padding-right: 100px;
padding-bottom: 25px;
}
#title{
text-align: center;
font-size: 35px;
color: black;
}
#description{
text-align: center;
padding-bottom: 50px;
font-size: 20px;
color: black;
}
#survey-form{
display: block;
background-color:#5a5d61;
border-radius: 0.25rem;
}
label {
display: flex;
font-size: 1.125rem;
line-height: 1.4;
margin-bottom: 0.5rem;
margin: 0;
}
body{
font-family: sans-serif, Helvetica, Arial;
font-size: 1rem;
font-weight: 400;
color: white;
}
-ederk