Survey Form - alignment issues

HTML-CSS
1

My survey labels are not aligning very well. I was wondering if someone could let me know where I’ve gone wrong with this. Here is my code:

Survey Form

How did you like our dance classes?

        <div class="questions">
            <label id="name-label" class="left" for="name">* Name:</label>
            <input type="text" name="name" class="right" id="name" placeholder="Enter your name" required>
        </div>
       
        
        <div class="questions">
            <label id="email-label" class="left" for="email">* Email:</label>
            <input id="email" class="right" type="email" name="email" placeholder="Enter your email" required> 
        </div>
        
        
        <div class="questions">
            <label id="number-label" class="left" for="number">* Age:</label>
            <input id="number" type="number" name="number" class="right" placeholder="Age" min="1" max="99" required>
        </div>
        
        <div class="questions">
            <label for="dropdown" id="dropdown-label" class="left">Dance experience:</label>
            <select name="" id="dropdown" class="right">
                <option value="0-1 year">0-1 year</option>
                <option value="2 years">2 years</option>
                <option value="3 years">3 years</option>
                <option value="4 years">4 years</option>
                <option value="5 years">5 years</option>
                <option value="6+ years">6+ years</option>
            </select>
        </div>
        
        <div class="questions">
            <label for="options" id="options-label" class="left">Classes:</label>
            <ul class="right">
                <li><input type="checkbox" value="ballet" /> Ballet</li>
                <li><input type="checkbox" value="tap" /> Tap</li>
                <li><input type="checkbox" value="jazz"/> Jazz</li>
                <li><input type="checkbox" value="breakdance"/> Breakdance/Hip Hop</li>
                <li><input type="checkbox" value="contemporary"/> Contemporary</li>
            </ul>
        </div>
 
        <div class="questions">
          <label for="town" id="town" class="left">What town do you live in?</label>
            <ul class="right">
                <li><input type="radio" name="town" value="town" /> Kalispell</li>
                <li><input type="radio" name="town" value="town"/> Whitefish</li>
                <li><input type="radio" name="town" value="town"/> Columbia Falls</li>
                <li><input type="radio" name="town" value="town"/> Bigfork</li>
            </ul>
        </div>
        <br>
        
        <textarea rows="6" cols="60">Please leave any questions or comments</textarea>
        <br>

     <center><button type="submit" id="submit">Submit</button></center>
        <br>
    </form>
</div>

body {
background-image: url(“https://yegfitness.ca/wp-content/uploads/2014/09/fitness-dance.jpg”);
font-family: Raleway;
background-size: cover;
}

form {
font-size: 23px;
}

p {
font-size: 25px;
color: white;
text-align: center;
}

select {
width: 50%;
height: 30px;
font-size: 20px;
background-color: white;
}

.questions {
color: white;
display: flex;
justify-content: center;
}

.left {
width: 30%;
text-align: right;
padding-right: 20px;
line-height: 66px;
}

.right {
vertical-align: middle;
width: 40%;
}

#title {
text-align: center;
font-size: 45px;
color: white;
}

.container {
background-color: black;
border-radius: 15px;
opacity: 0.7;
font-size: 20px;
width: 75%;
padding:20px;
margin:0 auto;
font-family: Raleway;
}

#name-label, #email-label, #number-label {
color: white;
}

#dropdown-label {
color: white;
}

#dropdown {
-webkit-appearance: none;
background-color: white;
color: black;
width: 375px;
border: 1px ridge white;
border-radius: 15px;
font-size: 18px;
}

input[type=text] {
border: 1px ridge white;
border-radius: 15px;
font-size: 18px;
-webkit-appearance: none;
width: 375px;
padding: 5px;
margin: 20px;
}

input[type=email] {
-webkit-appearance: none;
border: 1px ridge white;
border-radius: 15px;
font-size: 18px;
width: 375px;
padding: 5px;
margin: 20px;
}

input[type=number] {
-webkit-appearance: none;
border: 1px ridge white;
border-radius: 15px;
font-size: 18px;
width: 375px;
padding: 5px;
margin: 20px;
}

ul {
list-style-type: none;
padding: 5px;
margin: 20px;
}

li{
margin: 5px 0;
}

textarea {
-webkit-appearance: none;
display: flex;
align-content: center;
border: 1px ridge white;
border-radius: 15px;
background-color: white;
color: black;
font-size: 18px;
padding: 20px;
margin: auto;
}

#submit {
-webkit-appearance: none;
display: block;
text-align: center;
border-radius: 15px;
background-color: black;
color: white;
font-size: 18px;
padding: 20px;
margin: 30px;
}

2

It’s easier for us to see if you post a link to your codepen
If, for some reason, you can’t post a link yet just leave off the protocol and put in a space. Something like;
codepen io/hollygroves/pen/xyZZx (where xyZZx is whatever code is the link to your pen)

3

I am unable to post the codepen link, but I’ll try that. Thanks!

codepen io/hgroves/pen/OYgzxV?editors=1100

4

So the issue you’re facing is very common for new developers.

You’ve calculated the proper spacing for 3/4 fields because they’re all but one the same size.

The problem is with the last label field which is significantly longer than its 3 sibling labels.

So what’s the solution?
First off,. you have an excellent DOM structure when it comes to this part.

<div>
  <label></label>
  <input>
</div>

This is basically the structure you have. To ensure both the label and input are lined up vertically., use

display: flex-box;
align-items: center;

It will appear not to do much because they’re already pretty close to center.

Now about that last label., you have a few choices. The easiest solution would be to rethink how to reword it with a shorter label.

Right now it wraps onto two lines. You can force it to be on one line by doing:

white-space: nowrap;

If you do that before shrinking your label’s text you’ll see it become squished all on one line. So before I give any other suggestions I’m going to let you decide if you indeed want to shrink it. Other possibilities & it should probably happen anyways is to shrink the sizes of the inputs and select box. There’s really no reason for them to be that big.

When using CSS on input boxes., i prefer using:

width: 100%;
max-width: whatever size in px.

This allows the input box to shrink in side when in mobile, but it also prevents it from going beyond the size stated in max-width.

Good luck!

1 Like
5

Thank you so much, it looks so much better! It was nice to have such a thorough answer too. I appreciates ya!