Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:

Your code so far

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

Your browser information:

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

Challenge Information:

Survey Form - Build a Survey Form

2

Please Tell us what’s happening in your own words.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more you say, the more we can help!

3

Hello!

I am trying to “polish up” my survey. I have been stuck on the header/description alignment. I want them move with the form as I am zooming in/out - similar to the provided survey example

Screenshot 2023-10-28 114324
Screenshot 2023-10-28 1143241485×847 111 KB

. Instead, they are going behind the form once the screen is enlarged or move way up, creating a large gap, when the screen is minimized. What could be the problem?

4

Please post your code instead of a screenshot. Thank you

5 
body {
  width: 100%;
  height: 100%; 
  margin: 0;
  padding: 0;
  font-size: 20px;
  font-family: Tahoma, sans-serif; 
}

body::before {
  content: " ";
  background-image: url(https://jenmulligandesign.com/wp-content/uploads/2017/04/pexels-beach-tropical-scene-free-stock-photo.jpg);
  background-size: cover;
  background-position: center;
  position: fixed;
  opacity: 0.8;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  }

label #email, #name, #number {
  height:28px; 
  width: 100%;
  font-size:13pt; 
  border-radius: 5px; 
  display:block;
  margin: 10px 0 0 0;
}

.header {
position: relative;

}

header #title {
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  padding: 20px 0 0 0;
}

header #description {
  font-size: 23px;
  text-align: center;
  font-style: italic;
}

.neb {
  padding: 0 0 10px 0;
  font-weight: bold;
}

form {
  position: absolute;
  top: 50%;
  left: 50%;
  background: deepskyblue; 
  opacity: 0.9;
  transform: translate(-50%, -50%);
  padding: 60px;
  margin: 20px 0 0 0;

}

p {
  font-size: 15pt;
  font-weight: bold;
  padding: 20px 0;
  margin: auto; 
}

.inline {
  display: block;
  padding: 0 0 10 0;
}

textarea {
  margin: 0 0 30 0;
  font-size: 18px;
  width: 100%;
}

.submit_button {
  text-align: center;
  margin: 30px 0 0 0; 
}

#submit {
  padding: 7px 15px;
  font-size: 15pt;
  font-weight: bold;
  background: white;
}
6 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Survey</title>
        <link rel="stylesheet" href="styles.css">  
    </head>
    <body>
        <header class="header">
            <h1 id="title">Favorites</h1>
            <p id="description">Tell me a little bit more about yourself!</p>
        </header>
        <form id="survey-form">
            <div class=neb>
               <label id="name-label" for="name">Name <input id="name" type="text" name="name" placeholder="first and last name"required></label> 
            </div>
            <div class=neb>
               <label id="email-label" for="email">Email <input id="email" name ="email" type="email" placeholder="email" ></label> 
            </div>
            <div class=neb >
                <label id="number-label" for="number">Birthday <input id="number" placeholder="mm/dd"></label>
            </div>
            <div>
                <p for="dropdown">Choose your dream vacation spot:</p>
                <select style="height:30px; width:100%; font-size:12pt; border-radius: 5px" id="dropdown" name="choice">
                  <option value="city">City</option>
                  <option value="farm">Farm</option>
                  <option value="park">National Park</option>
                  <option value="beach">Beach</option>
                  <option value="resort">Resort</option>
                  <option value="cruise">Cruiseship</option>
                  <option value="camp">Campsite</option>
                </select>
            </div>
            <div>
                <p>Who would you take with you on your vacation?</p>
                <label for="buddy" class="inline"><input id="buddy" type="radio" name="companion" value="family" > Family</label>
                <label class="inline" for="buddy"><input id="budy" type="radio" name="companion" value="friends" > Friends</label>
                <label  class="inline" for="buddy"><input type="radio" name="companion" value="alone" > Alone</label>
            </div>
            <div>
                <p>What is your favorite gift card? <span style="font-size: 15px">(check all that apply)</span></p>
                <label class="inline">  <input name="prefer" value="restaurant" type="checkbox"> Restaurant</label>
                <label class="inline" > <input name="prefer" value="mall" type="checkbox"> Shopping Mall</label>
                 <label class="inline" >  <input name="prefer" value="diy" type="checkbox"> Arts-and-Crafts Store</label>
                <label class="inline">  <input name="prefer" value="entertainment" type="checkbox"> Entertainment</label>
                <label class="inline">  <input name="prefer" value="amazon" type="checkbox"> Amazon</label>
                <labelclass="inline" > <input name="prefer" value="surprise" type="checkbox"> I love surprises</label>
            </div>
            <div>
                <p for="elaborate">Be more specific on one of your absolute favorite gift card.</p> 
                <textarea id="elaborate" name="elaborate" rows="15" cols="50" placeholder="type your answer here..."></textarea>
            </div>
            <div  class="submit_button">
                <input style="border-radius: 5px;" id="submit" type="submit">
            </div> 
        </form>
    </body>
</html>
7

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

8

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