Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:

Hello. I am in the process of styling my survey form and am stuck on the labels. I thought I aligned my label text in the center correctly, but they keep coming up on the left side. Can someone tell me what I’m doing wrong?

Your code so far

<!DOCTYPE html>
<html lang="en">
  <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width-content-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  </head>
  <body>
<header class="header">
  <h1 id="title">freeCodeCamp Survey Form</h1>
  <p id="description">Thank you for taking the time to help us improve the platform</p>
  </header>
  <form id="survey-form">
<label for="name" id="name-label">Name</label>
<input id="name" type="text" placeholder="Enter your name" required>
<label for="email" id="email-label">Email</label>
<input id="email" type="email" placeholder="Enter your Email" required>
<label for="number" id="number-label">Age<span class="parentheses">(optional)</span></label>
<input id="number" type="number" placeholder="Age" min="13" max="99">
<p>Which option best describes your current role?</p>
<select id="dropdown" required>
  <option disabled selected value>Select current role</option>
<option value="student">Student</option>
<option value="job">Full Time Job</option>
<option value="learner">Full Time Learner</option>
<option value="PreferNo">Prefer not to Say</option>
<option value="other">Other</option>
  </select>
  <p>Would you recommend freeCodeCamp to a friend?</p>
  <label>
    <input name="recommend" value="definitely" type="radio">Definitely
    </label>
    <label>
      <input name="recommend" value="maybe" type="radio">Maybe</label>
      <label>
        <input name="recommend" value="not-sure" type="radio">Not Sure</label>
        <p>What is your favorite feature of freeCodeCamp?</p>
        <select  id="dropdown" required>
          <option disabled selected value>Select an option</option>
          <option value="challenges">Challenges</option>
          <option value="projects">Projects</option>
          <option value="community">Community</option>
          <option value="open-source">Open Source</option>
</select>
<p>What would you like to see improved?<span class="parentheses">(Check all that apply)</span></p>
<label>
<input name="improve" value="front-end-projects" type="checkbox">Front-end Projects</label>
  <label>
    <input name="improve" value="back-end-projects" type="checkbox">Back-end Projects</label>
<label>
  <input name="improve" value="data-visualization" type="checkbox">Data Visualization</label>
  <label>
    <input name="improve" value="challenges" type="checkbox">Challenges</label>
    <label>
      <input name="improve" value="open-source-community" type="checkbox">Open Source Community</label>
      <label>
        <input name="improve" value="gitter-help-rooms" type="checkbox">Gitter help rooms</label>
        <label>
          <input name="improve" value="videos" type="checkbox">Videos</label>
          <label>
            <input name="improve" value="city-meetups" type="checkbox">City Meetups</label>
            <label>
              <input name="improve" value="wiki" type="checkbox">Wiki</label>
              <label>
                <input name="improve" value="forum" type="checkbox">Forum</label>
                <label>
                  <input name="improve" value="additional-courses" type="checkbox">Additional Courses</label>
<p> Any comments or suggestions?</p>
<textarea id="comments" placeholder="Enter your comment here..."></textarea>
<button id="submit">Submit</button>
</form>
  </body>
  </html>

@import url('https://fonts.googleapis.com/css?family=Poppins:200i,400&display=swap');

:root {
  --color-white: #f3f3f3;
  --color-darkblue: #1b1b32;--color-darkblue-alpha: rgba(27, 27, 50, 0.8);
  --color-green: #37af65;
}

body {
  font-family: Poppins, serif;
  font-size: 1rem;
  line-height: 1.6;
  color:var(--color-white: #f3f3f3);
  margin: 0;
  text-align:center;
}
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
  background: var(--color-darkblue);
  background-image: linear-gradient(
      115deg,
      rgba(58, 58, 158, 0.8),
      rgba(136, 136, 206, 0.7)
    ),
    url(https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
h1 {
  font-weight: 700;
  line-height: 1.2;
}

p {
  font-size: 1.125rem;
}

h1,
p {
  margin-top: 0;
  margin-bottom: 0.5rem;
   text-align:center;
}
label {
  display: flex;
  align-items: center;
  font-size: 1.125rem;
  margin-bottom: 0.5rem;
}
input,
button,
select,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
   text-align:center;
}
.header {
  padding: 0 0.625rem;
  margin-bottom: 1.875rem;
}
#description {
  font-style: italic;
  font-weight: 200;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
}
.parentheses {
  margin-left: 0.25rem;
  font-size: 1rem;
  color: #e4e4e4;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

2

can you put your code into a codepen?
This is easier to use for your type of layout question.

3

Please let me know if you can see it

4

You still need to put the html code in the HTML section of the pen…

5

Sorry about that! It should be better now, right?

6

please see the forked pen here
https://cdpn.io/pen/debug/BaxPyXb?authentication_hash=WPMLYbDvXznr

I changed your code to make the name and email fields appear in the middle.
Is that what you were trying to do?

Basically, I moved the input into the label element.
Then made the label element use display block type. (I made that happen with a class but you can try other ways as well).

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.