Hi,
I am currently stuck with one last part of the Survey form. I cannot seem to align my first Dropdown area with the rest of my code. I have rewritten it multiple times in both HTML and CSS. Any guidance for where I should go from here?
HTML CODE:
<h1 id="title">Survey Form</h1>
<div id="form-outer">
<p id="description">Let me know how I can improve my blog!</p>
<form id="survey-form" method="https://crossorigin.me/https://freecodecamp.com">
<div class="rowTab"><div class="labels"><label id="name-label" for="name">* Name: </label>
</div>
<div class="rightTab"> <input autofocus type="text" name="name" id="name" class="input-field" placeholder="Enter your name" required>
</div>
</div>
<div class="rowTab">
<div class="labels"><label id="email-label" for="email"> * Email: </label></div>
<div class="rightTab">
<input type="email" name="email" id="email" class="input-field" required placeholder="Enter your email"></div>
</div>
<div class="rowTab"><div class="labels"><label id="number-label" for "age"> * Age:</label></div>
<div class="rightTab"> <input type="number" name="age" id="number" min="1" max="100" class="input-field" placeholder="Age"></div>
</div>
<div class="rowTab"><div class="labels"><label for="currentPos">What do you like about my blog?</label>
</div>
<div class"rightTab"><select id="dropdown" name="currentPos" class="dropdown"><option disabled value>Select an option</option>
<option value="makeup-tutorials">Makeup Tutorials</option>
<option value="dating">Dating Stories</option>
<option value="style">Style Tips</option>
<option value="other">Other</option>
</select>
</div>
</div>
<div class="rowTab"><div class="labels"><label for="userRating"> * How likely are you to recommend my blog, Makeup Bitch, to a friend?</label></div>
<div class="rightTab">
<ul style="list-style:none;">
<li class="radio"><label>Definitely<input name="radio-buttons" value="1" type="radio" class="userRatings"></label></li>
<li class="radio"><label>Maybe<input name="radio-buttons" value="2" type="radio" class="userRatings"></label></li>
<li class="radio"><label>Not Sure<input name="radio-buttons" value="3" type="radio" class="userRatings"></label></li>
</ul>
</div>
</div>
<div class="rowTab"><div class="labels"><label for="most-like">What do you like most about Makeup Bitch?</label></div>
<div class="rightTab"><select id="most-like" name="mostLike" class="dropdown"><option disabled selected value>Select an option</option>
<option value="honesty"> Honest Stories</option>
<option value="makeup">Makeup Reviews</option>
<option value="hair">Hair-Care Tips</options>
<option value="Website">Overall Website Style</option>
</select>
</div>
</div>
<div class="rowTab"><div class="labels"><labels for="preferences">Things that I can improve on in the future<br>(Check all that apply):</label>
</div>
<div class="rightTab"><ul id="preferences" style="list-style: none;">
<li class="checkbox"><label><input name="prefer" value="1" type="checkbox" class="userRatings"> Higher Quality Pictures</label></li>
<li class="checkbox"><label><input name="prefer" value="2" type="checkbox" class="userRatings"> More Opinion Posts</label></li>
<li class="checkbox"><label><input name="prefer" value="3" type="checkbox" class="userRatings"> More Makeup Reviews</label></li>
<li class="checkbox"><label><input name="prefer" value="4" type="checkbox" class="userRatings"> Guest Author/Collaborations</label></li>
<li class="checkbox"><label><input name="prefer" value="5" type="checkbox" class="userRatings"> Videos</label></li>
<li class="checkbox"><label><input name="prefer" value="6" type="checkbox" class="userRatings"> Social Media Connections</label></li>
</ul>
</div>
</div>
<div class="rowTab"><div class="labels"><label for="comments">Any Comments or Suggestions?</label>
</div>
<div class="rightTab"><textarea id="comments" class="input-field" style="height:40px;resize:vertical;" name="comment" placeholder="Enter your comment here..."></textarea>
</div>
</div>
<button id="submit" type="submit">Submit</button>
</form>
</div>
CSS CODE:
@import url('https://fonts.googleapis.com/css?family=Sunflower:300');
html, body {
background-color: #F0FFFF;
text-align: center;
font-family: "sunflower", Sunflower, sans-serif;
min-width: 320px;
}
header {
font-size: 2em;
font-weight: bold;
margin: 20px;
}
#form-outer {
background-color: white;
margin: 0 auto;
border-radius: 4px;
width: 75%;
max-width: 900px;
padding: 10px;
padding-top: 25px;
}
.labels {
display: inline-block;
text-align: right;
width: 40%;
padding: 5px;
vertical-align: top;
margin-top: 10px;
}
.rightTab {
display: inline-block;
text-align: left;
width: 48%;
vertical-align: middle;
}
.input-field {
height: 20px;
width: 280px;
padding: 5px;
margin: 10px;
border: 1px solid grey;
border-radius: 2px;
}
#userAge {
width: 40px;
}
.userRatings, input[type="checkbox"] {
float: left;
margin-right: 5px;
}
#submit {
background-color: Dodgerblue;
border-radius: 4px;
color: white;
font-size: 1em;
height: 30px;
width: 80px;
margin: 10px;
border: 0px solid;
}
.dropdown {
height: 30px;
width: 140px;
padding: 5px;
margin: 10px;
margin-top: 15px;
border: 1px solid grey;
border-radius: 2px;
}
.radio, .checkbox {
position: relative;
left: -43px;
margin-left: 10px;
display: block;
padding-bottom: 10px;
}
@media screen and (max-width: 520px) {
.labels {
width: 100%;
text-align: left;
}
.rightTab {
width: 80%;
float: left;
}
.input-field {
width: 100%;
}
select {
width: 100%;
}
}