Responsive Web Design Projects - Build a Survey Form

Tell us what’s happening:
Describe your issue in detail here.

The first issue I’m having is that I want the labels to be above the input boxes and be left justified but they seem to remain on the same line.

Second issue is I tried to make the selection at “Would you recommend freeCodeCamp to a friend?” choices be in a new line not on the same line the dots move all the way to the left side.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
    <title>Survey Form</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    
    <body>
        <header>
            <h1 id="title">freeCodeCamp Survey Form</h1>
            <p id="description" class="description-title"><i>Thank you for taking the time to help us improve the platform</i></p>
        </header>
        
        <form id="survey-form">
            <div class="form-group">
                <label id="name-label" for="name">Name
                    <input placeholder="Enter your name" required id="name" class="name-input" type="text">
                </label>
            </div>
            <div class="form-group">
                <label id="name-label" for="email">Email
                    <input placeholder="Enter your email" required id="email" class="email-input" type="email">
                </label>
            </div>
            <div class="form-group">
                <label id="age-label" for="age">Age (optional)
                    <input placeholder="Age" required id="age" type="number" class="age-input" min="10" max="99">
                </label>
            </div>
            <div class="form-group">
                <p>Would you recommend freeCodeCamp to a friend?</p>
                <label>
                    <input name="user-recommend" class="recommend" value="definitely" type="radio" checked>Definitely 
                </label>
                <label>
                    <input name="user-recommend" class="recommend" value="maybe" type="radio" checked>Maybe
                </label>
                <label>
                    <input name="user-recommend" class="recommend" value="not sure" type="radio" checked>Not sure
                </label>
            </div>
        </form>
    </body>
</html>

/* file: styles.css */
h1 {
    text-align: center;
    margin: auto;
    font-size: 28px;
}

.description-title {
    text-align: center;
}

.name-input, .email-input, .age-input {
    width: 100px;
    height: 20px;

}

.form-group {
    margin: 0 auto 1.25rem auto;
    padding: 0.25rem;
    text-align: center;
}

.recommend {
    display: block;
}

Your browser information:

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

Challenge: Responsive Web Design Projects - Build a Survey Form

Link to the challenge:

hello and welcome to fcc forum :slight_smile:

  • use display: block; for input

Second issue is I tried to make the selection at “Would you recommend freeCodeCamp to a friend?” choices be in a new line not on the same line the dots move all the way to the left side

  • use flex on them

address those changes and it should be alright, happy learning :slight_smile:

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