Survey Form Assignment

Hello Everyone,
I went through the responsive web design course over the last couple of weeks and now I am working on the Survey form assignment. I am having a lot of trouble with styling form so that I have the text on top followed by a longer box beneath it ( like the example). Iv been using various resources to try and figure out the right properties to use to get the page they way I want it but am having little luck. If anyone could help out it would be greatly appreciated. I can provide both my html and css thus far if that would be useful. Thank you in advanced!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="formstyle.css">
    <title>Air Jordan Form</title>
</head>
<div class="container">
    <header>
            <h1 id="title" class="text-center">Most Favored Air Jordan</h1>
        <div id="description">
            <p>Which Jordan model is your favorite?</p>
        </div>
    </header>
  <form id="survey-form">
      <div class="form-group" >
      <label id="name" for="name">Name</label>
      <input 
        type="text" 
        id="name-label" 
        class="form-control"
        placeholder="John Doe"
        required
        >
        </div>
        <div class="form-group">
            <label  id="email-label" for="email">Email</label>
            <input 
                type="email" 
                id="email" 
                class="form-control"
                placeholder="johndoe@gmail.com" 
                required>
        </div>
        <div class="form-group">
            <label id="number-label" for="number">Silhouette<span class="clue">(optional)</span>
            </label>
            <input
                type="number"
                name="Silhouette"
                id="number"
                min="1"
                max="26"
                class="form-control"
                placeholder="1"
            />
        </div>
        <div class="form-group">
            <label id="text"> Favorite Shoe Color</label>
            <input
            type="text"
            id="shoe-color"
            class="form-control"
            placeholder="Bred Toe"
            />
        </div>
        <div class="form-group">
            <p>Which Shoe has the most hype?</p>
            <select id="dropdown" name="hype" class="form-control" required>
                <option disable selected value>Pick One</option>
                <option value="retro-1">Jordan 1</option>
                <option value="retro-3">Jordan 3</option>
                <option value="retro-4">Jordan 4</option>
                <option value="retro-11">Jordan 11</option>
                <option value="other">Other</option> 
            </select>
        </div>
        <div class="form-group">
            <p>How many pairs of Jordans do you own?</p>
            <label>
                <input 
                name="collection"
                value="less-than-5"
                type="radio"
                class="input-radio"
                checked> Less than 5
            </label><br>
            <label>
                <input
                name="collection"
                value="more-than-5"
                type="radio"
                class="input-radio">
                6 - 9
            </label><br>
            <label>
                <input
                name="collection"
                value="10+"
                type="radio"
                class="input-radio">
                10+
            </label>
        </div> 
        <div class="form-group">
            <p>
                Do you wear other types of shoes besides Jordans?
            </p>
            <select id="other-brands" name="otherBrands"  class="form-control" required>
                <option disable selected value> Select and option</option>
                <option value="nike">Yes, Nike</option>
                <option value="asics">Yes, Asics</option>
                <option value="yeezy">Yes, Yeezy</option>
                <option value="adidas">Yes, Adidas</option>
                <option value="all">All the above</option>
                <option value="only-jordans"> Nah, only Jordans</option>
            </select>
        </div>
        <div class="form-group">
            <p>What's the most difficult part about being a sneakerhead?
                <span class="clue"> (Check all that apply)</span>
            </p>
            <label>
                <input
                name="difficult"
                value="retail"
                type="checkbox"
                class="input-checkbox"
                >Copping for retail</label>
            </label><br>
            <label>
                <input
                name="difficult"
                value="completing-sets"
                type="checkbox"
                class="input-checkbox"
                >Completing sets</label>
            </label><br>
            <label>
                <input
                name="difficult"
                value="budget"
                type="checkbox"
                class="input-checkbox"
                >Staying within your budget</label>
            </label><br>
            <label>
                <input
                name="difficult"
                value="partner"
                type="checkbox"
                class="input-checkbox"
                >Wife/ spouse complaing about your habbit</label>
            </label><br>
            <label>
                <input
                name="difficult"
                value="reseller"
                type="checkbox"
                class="input-checkbox"
                >Having to deal with resellers</label>
            </label><br>
            <label>
                <input
                name="difficult"
                value="authentic"
                type="checkbox"
                class="input-checkbox"
                >Finding authentic shoes for a reasonable price</label>
            </label>
            <label>
                <input
                name="difficult"
                value="other"
                type="checkbox"
                class="input-checkbox"
                >Something else</label>
            </label>
            <div class="form-group">
                <p>Comments or suggestions?</p>
                <textarea
                id="comments"
                class="input-textarea"
                name="comment"
                placeholder="Enter your suggestions here..."
                ></textarea>
            </div>

            <div class="form-group">
                <button 
                type="submit" 
                id="submit" 
                class="submit-button"
                >Submit</button>
            </div>
        </div>


      


  </form>
</div>
</html>
:root{
    background-color: rgba(187, 46, 36, 0.671);
}
.container{
    padding-left: 100px;
    padding-right: 100px;
    padding-bottom: 25px;
}
#title{
    text-align: center;
    font-size: 35px;
    color: black;
    
}
#description{
    text-align: center;
    padding-bottom: 50px;
    font-size: 20px;
    color: black;
}
#survey-form{
    display: block;
    background-color:#5a5d61; 
    border-radius: 0.25rem; 
}
label {
    display: flex;
    font-size: 1.125rem;
    line-height: 1.4;
    margin-bottom: 0.5rem;
    margin: 0;
  }
  body{
      font-family: sans-serif, Helvetica, Arial;
      font-size: 1rem;
      font-weight: 400;
      color: white;
  }

-ederk

@ederk, it’s easier if you provide a link to your live code so that we don’t have to copy/paste your code.
When you submit your project it has to be a live link so you can provide that link.

I’m not sure I understand your issue. When I look at your code I see the following (screenshot attached)
Screen Shot 2022-03-21 at 02.00.39
which is what you say you want to achieve.

Some suggestions;

  • don’t take code from the sample project. The samples show one way to complete the project. The instructions say to make yours “functionally similar” and to “give it your own personal style”
  • Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>)
    The test script, with all tests passing, should be included when you submit your projects.
    Before styling, it’s best to pass as many user stories as you can. For this project all user stories can pass prior to doing any styling.

So I have been doing all the code via vs code then copying and pasting into code pen to run the tests and submit the project. Are you asking for a link from code pen? I have made everything myself, I have used a couple of the class declarations from the example for targeting purposes but other than that been keeping it to my design. I personally just dont like how it looks on the screen and like how the example has these long boxes that take up the center of the screen. That is what I am looking to do. Expand the text boxes and make them longer and larger and then format the submit button to be centered and take up majority of the center block.

@Roma my mistake for the confusion, thought pasting the code would be helpful heres the updated link to codepen. I got the entry bars the way I like for now. Now my submit button is off the screen. Cant figure out how to expand my block to fit it. Have already tried playing with the margins and padding in .form-control and #container and did not get the results that I am looking for.

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