Survey Form - Help I'm Stuck!

Survey Form - Help I'm Stuck!
0

#1

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%;
  }
}

#2

If you have this in a pencode or similar, it would be better to just copy and paste a link to that codepen.


#3

I’ve edited your post for readability. When you enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

@r.lorien7 When posting such a large amount of code, please use Codepen, so that other campers can test out the code without having to copy/paste your code and test it out.


#4

Try using: <p>What do you like about my blog?</p>

Instead of: <div class="rowTab"><div class="labels"><label for="currentPos">What do you like about my blog?</label> </div>

Let me know if it worked for you.


#5

Hi,
You forgot the = between class and ‘rightTab’

 <div class"rightTab"><select id="dropdown" name="currentPos" class="dropdown"><option disabled value>Select an option</option>

Should work fine after fixing that.