Survey form project responsiveness

HTML-CSS
1

Hello everyone,

I am trying to build the survey form project. It is supposed to be more or less a copy of the survey form we built in the course but with different colors. However, to my surprise, I found that with my CSS the survey form is not responsive if I change screen width. If I copy and paste the CSS from the course, the survey form becomes responsive even though I copied all the most important properties. It seems only the colors are different. Can anybody tell me what I’m doing wrong? Thank you.

My HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Registration Form</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1 id="title">Registration Form</h1>
    <p id="description">Please submit your information</p>
    <form id="survey-form" method="post">
      <fieldset>
        <label id="name-label">Enter your name: <input id="name" type="text"  placeholder="John Doe" value="" required></label>
        <label id="email-label">Enter your email: <input id="email" type="email" placeholder="john.doe@gmail.com" value="" required></label>
        <label id="number-label">Enter your age: <input id="number" type="number" min="18" max="120" placeholder="21" value="" required></label>       

      </fieldset>

      <fieldset>
        <legend>Account type (required)</legend>
        <label for="personal-account"><input type="radio" id="personal-account" name="account" value="personal" class="inline" checked>Personal account</label>
        <label for="business-account"><input type="radio" id="business-account" name="account" value="business" class="inline">Business account</label>
      </fieldset>
      <fieldset>
        <legend>Membership type (required)</legend>
        <label for="basic-membership"><input type="radio" id="basic-membership" name="membership" value="basic" class="inline" checked>Basic membership</label>
        
        <label for="premium-membership"><input type="radio" id="premium-membership" name="membership" value="premium" class="inline">Premium membership</label>
      </fieldset>
      
      <fieldset>
        <label for="bio">Provide a bio:<textarea id="bio" name="bio" rows="3" cols="30" placeholder="I'm a professional developer..."></textarea></label>
      </fieldset>

      <fieldset>
        <label for="dropdown">How did you hear about us?<select id="dropdown" name="referrer">
          <option value="">(Select one)</option>
          <option value="Google">Google ad</option>
          <option value="YouTube">YouTube ad</option>
          <option value="Other">Other</option>
        </label>
        </select>                  
      </fieldset>
      <label><input type="checkbox" value="mailing-list" class="inline">I agree to receive email notifications</label>
      <label><input type="checkbox" value="mailing-list" class="inline">I accept the <a href="freecodecamp.org">terms and conditions</a></label>
      <button type="submit" id="submit">Submit</button>

    </form>



  </body>
</html>

My CSS (not responsive)

body {
  width: 100%;
  height: 100vh;
  margin: 0;
  background-color: #5D8736; 
  color: #F5F5F5;
  font-size: 16px;
  font-family: serif;
  
}

h1, p {
  text-align: center;
  margin: 1rem auto;
}

form {
  width: 60vh;
  min-width: 300px;
  max-width: 500px;
  padding-bottom: 2em;
  margin: 0 auto;
}

fieldset {
  border: none;
  
}

button[type="submit"] {
  display: block;
  width: 60%;
  margin: 1em auto;
  height: 2em;
  font-size: 1.1rem;
  background-color: white;
  border-color: white;
  min-width: 300px;
}

.inline {
  width: unset;
  vertical-align: middle;
  margin: 0 0.5em 0 0;
}

label {
  display: block;
  margin: 0.5rem 0;
}

input,
textarea,
select {
  margin: 10px 0 0 0;
  width: 100%;
  min-height: 2em;
}

CSS from the course (responsive)

body {
  width: 100%;
  height: 100vh;
  margin: 0;
  background-color: #1b1b32;
  color: #f5f6f7;
  font-family: Tahoma;
  font-size: 16px;
}

h1, p {
  margin: 1em auto;
  text-align: center;
}

form {
  width: 60vw;
  max-width: 500px;
  min-width: 300px;
  margin: 0 auto;
  padding-bottom: 2em;
}

fieldset {
  border: none;
  padding: 2rem 0;
  border-bottom: 3px solid #3b3b4f;
}

fieldset:last-of-type {
  border-bottom: none;
}

label {
  display: block;
  margin: 0.5rem 0;
}

input,
textarea,
select {
  margin: 10px 0 0 0;
  width: 100%;
  min-height: 2em;
}

input, textarea {
  background-color: #0a0a23;
  border: 1px solid #0a0a23;
  color: #ffffff;
}

.inline {
  width: unset;
  margin: 0 0.5em 0 0;
  vertical-align: middle;
}

input[type="submit"] {
  display: block;
  width: 60%;
  margin: 1em auto;
  height: 2em;
  font-size: 1.1rem;
  background-color: #3b3b4f;
  border-color: white;
  min-width: 300px;
}

input[type="file"] {
  padding: 1px 2px;
}
2

no, it needs to be a page with your own style, you should not copy an other project

copying an other project is against the academic honesty pledge

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 (').

3

Hye Buddy , Can you please provide your code.

Here You Can See the Help button, kindly do use it and upload your code.

Screenshot (48)
Screenshot (48)1920×910 172 KB

Hope You Understand.

4

Your code is not setting the form width using the same viewport unit as the demo code.

6

Amazing! You nailed it. Thanks! I wasn’t being attentive. Of course, I had to use vw when setting the width. I typed in vh instead.

When I corrected this tiny little typo, my form is now responsive. I’m such a noob.

7

I know I shouldn’t copy another project but I just wanted to make sure I can build something similar. I’m only breaking the honesty pledge if I pass the course work as my own which I’m not doing here.

8

you are still not going to learn to make your own projects if you look at the code, you are cheating yourself of precious learning chances

9

If you look at the demo code after you have coded your own version, I think it is fine. In fact, I think it is a good idea to learn from code you didn’t write. But it shouldn’t be used instead of writing your own code.

As for replicating the demo projects. I actually think it would be great if we had a couple of challenges where the goal was to match a design as closely as possible. The camper could be given design documentation and a style guide. Obviously, they should still not use the demo code to pass, but they should replicate its design.

11

I agree. I was thinking exactly the same. I wanted to copy one project and then work on something more original. It’s hard to come up with an idea though.