Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:

Hey! I am having an issue related to the “Age” and “Current Gender” line. On my laptop, it looks great, the spacing of the two elements is perfect, but on mobile, its pushed a bit to the right and isn’t aligned properly anymore. I’ve tried to mess with the viewport and the margins but still can’t get it to look right. I haven’t learned @media or flexboxes, and haven’t figured out how to work them yet. Thank you to any answers I get, and sorry in advance for how rough my code definitely is lol <3

Your code so far

<!DOCTYPE html>

<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width; initial-scale=1;  maximum-scale=1; user-scalable=0" />
 <title>Feedback Survey</title>
 <link rel="stylesheet" href="styles.css">
</head>
<body> 
 <main>
   <h1 id="title">[Webtoon Name] Feedback Survey</h1>
     <p id="description"><i>This will help us understand our audience and give you the opportunity to provide any feedback you may have!</i></p>
   <form id="survey-form" class="form">
     <h2>Demographic Information</h2>
     <fieldset id="demographic">
       
  <label id="name-label"class="label">First Name/Preferred Name:<input class="box" id="name" type="text" required></label>

      <label id="email-label" class="label">Email Address:<input class="box" id="email" type="email" required></label> 

      <label id="number-label"class="label" for="age">Age<i> (optional)</i>:<input class="box" id="number" type="number" min="1" max="100"></label>
      <label class="label" for="gender">Current Gender:<select id="dropdown" class="gender"></label>
        <option value="">(select one)</option>
        <option value="1">Female</option>
        <option value "2">Male</option>
        <option value "3">Nonbinary</option>
        <option value "4">Genderfluid</option>
        <option value"5">Genderqueer</option>
        <option value "6">Questioning</option>
        <option value"7">Other</option>
        </select>
        <br>
        <div class=centered>
        <label class="label" id="region-label">What region do you live in?</label>
      <select id="region">
         <option value"0">(select one)</option>
         <option value"1">Africa</option>
         <option value"2">Asia</option>
       <option value"3">Australia</option>
       <option value"4">Europe</option>
       <option value"5">North America</option>
       <option value"6">South America</option>
        </select>
      </div>
    </fieldset>
    <h2>Webtoon Feedback</h2>
      <fieldset id="feedback">
        <label>Who is your favorite character?</label>
  <br>
 <label><input id="kanade" type="radio" name="kanade-ladyluck">Kanade</label>
<label id="ll-label"><input id="ladyluck" type="radio" name="kanade-ladyluck">Lady Luck</label>
     </fieldset>
     <label><input id="submit" type="submit">
   </form>
   <p id="thanks">Thank you for taking part of our survey! 
     </p>
 </main>
</body>

body {
  width: 100%;
  font-family: Verdana;
background: linear-gradient(#9fe2bf 0%,white,#f3c6f2)
}
#title {
  text-align: center;
  margin-bottom: 0px;
  font-family: trebuchet ms;
}
#name, #email{
  width:85%;
  margin: 10px auto;
  margin-top: 1px;
  display: block;
}
h2{
  margin-bottom: 0px;
  margin-top: 10px;
  font-family: Trebuchet  MS  
}
#demographic {
  background: 
}
.box {
  height: 33;
  font-size: 1em;
  border-radius: 15px;
  border: solid; 
  color: #8d90e2
}
@media {
  .box { 
    border-radius: 30px;
  }
}
#submit {
  width:80%;
  margin: auto;
}
#number {
  display: inline-block;
  margin-left: 2px;
  margin-bottom: 10px;
  width: 65px;
  text-align: center;
  height: 33;
  padding-left: 16px;
}
#dropdown {
  display: inline-block;
  margin-left: 2px;
  width: 152px;
  height: 33;
  margin-right: 25px;
  border-radius: 15px;
  border: solid;
  text-align: center;
  font-size: 1em;
  margin-bottom: 10px;
  text-wrap: nowrap;
}
#region {
 width: 250px;
 height: 33;
 border-radius: 15px;
 border: solid;
 text-align: center;
 font-size: 1em;
}
  #region-label {
  }
#number-label{
  margin-left: 28px;
  text-align: center;
}
label[for=gender]{
  margin-left: 28px;
  text-wrap: nowrap;
}
.label {
  font-family: Verdana;
  color: #8d90e2
}
.form {
  width: 80vw;
  margin: auto;
  max-width: 600px;
  min-width: 500px;
}
.inline {
 display: inline-block;
 text-wrap: nowrap;
 text-align: center;
}
.centered {
  text-align: center;
}
#thanks {
  display: block;
  text-align: center;
  margin-bottom: 0;
  text-size: 1em;
  font-family: Verdana;
}
#ladyluck {
  
}
#description {
   width: 580px;
   text-align: center;
   display: block;
   margin:  auto;
   margin-top: 5px;
   font-family: Verdana;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36

Challenge Information:

Survey Form - Build a Survey Form

2

Hey.
I’d suggest you get familiar with Flexbox and the media query. Your problem can be solved by either of those. It won’t help you when I start talking about such things when you’re unfamiliar with them. I’m sure once you know about them, you can solve the problem without needing a lot of help.

3

Hi @snowfle and welcome to fCC forum.
You may want to check articles below:

1 Like
4

Thank you! The tutorial about CSS Flexbox and Grids had a solution that worked for me! <3

1 Like
5

I’m glad it helped.

:+1: Happy coding.

6

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