Survey Form - Build a Survey Form

Tell us what’s happening:

I am attempting to set the display of my ‘div’ elements to ‘block’ - but it is not working.

div {
display: block;
}

If I target individual elements, such as ‘input’ or ‘label’, and set the display to ‘block’ , then it works.

Can someone please help me? I’ve spent hours trying to figure this ONE thing out.

  **Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html lang="en">

<head>
<link rel="stylesheet" href="styles.css" />
</head>
  <body>
    <div class="container">

      <header class="header">
        <h1 id="title" class="title">Survey Form</h1>
        <p id="description" class="description">This form collects information.</p>
      </header>

      <form id="survey-form">

        <div class="form-group">
          <label id="name-label" for="name">Name
          </label>
          <input type="text" id="name" name="name" class="form-control" placeholder="Enter your name" required />
        </div>

        <div class="form-group">
          <label id="email-label">Enter email</label>
          <input type="email" id="email" name="email" class="form-control" placeholder="Enter your email" required />
        </div>

        <div class="form-group">
          <label id="number-label">
            Age
            <span class="clue">(optional)
            </span> 
          </label>
          <input type="number" id="number" name="number" min="18" max="120" class="form-control" placeholder="Age" required />
        </div>

        <div class="form-group">
          <p>Why are you filling in this form?
          <select id="dropdown" name="reason" class="form-control" required>
            <option disabled selected value>Choose one
            </option>
            <option value="filling">I like filling things</option>
            <option value="lessEmpty">It makes me feel less empty</option>
          </select>
        </div>

        <div class="form-group">
          <p>How likely are you to fill in this form?</p>
          <label>
            <input name="user-likeliness" value="very-likely" type="radio" class="input-radio" />
            Very Likely
          </label>
          <label>
            <input name="user-likeliness" value="likely" type="radio" class="input-radio" />
            Likely
            </label> 
            <label>
            <input name="user-likeliness" value="unlikely" type="radio" class="input-radio" />
            Unlikely
          </label>
          <label>
            <input name="user-likeliness" value="very-unlikley" type="radio" class="input-radio" />
            Very Unlikely
          </label>
        </div>

        <div class="form-group">
          <p>What would you like to improve?
            <span class="clue">(Check all that apply)
          </p>
          <label>
            <input name="improve" value="myMind" type="checkbox" class="input-checkbox" />
            My mind
          </label>
          <label>
            <input name="improve" value="myBody" type="checkbox" class="input-checkbox" />
            My body
          </label>
          <label>
            <input name="improve" value="mySpirit" type="checkbox" class="input-checkbox" />
            My spirit
          </label>
        </div>

        <div class="form-group">
          <p>Do you have any comments?</p>
          <textarea id="comments" class="input-textarea " name="comment" placeholder="Keep your comments to yourself!"></textarea>
        </div>

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

      </form>
    </div>
  </body>
</html>
/* file: styles.css */

  **Your browser information:**

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

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

Hi @PranaCurrent .

What are you trying to do?

If I copy pasted your answer to the solution, the code is accepted.

All divs are by default display: block.

But input and label are by default display: inline

Don’t forget to enclose the code with backticks ` so that it displays the code and not get converted to HTML.

Hope that helps :+1:

Thank you for replying.

I am trying to style my HTML div elements so that it will display in block. I was under the impression that ‘block’ would put each element on a new line. I am trying to replicate the CSS styling of freecodecamps survey example. In the example, the entire div element was displayed as block yet it doesn’t work for me.

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