Learn-accessibility-by-building-a-quiz step 53-CSS

[Blazer2k22]

I can’t figure out how to solve this CSS part
Her is the task:
Give the .formrow elements top margin, and left and right padding. The other padding values should be 0 .

Then, increase the font size for all input elements.
Hint:

You should use a .formrow selector to target the .formrow elements.

section {

top-margin: 10px;

padding: 0 10px 0 10px;

font-size: 10px;

}

Here is the code for Html:

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />

<title>Accessibility Quiz</title>

<link rel="stylesheet" href="styles.css" />

<header>

  <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">

  <h1>HTML/CSS Quiz</h1>

  <nav>

    <ul>

      <li><a href="#student-info">INFO</a></li>

      <li><a href="#html-questions">HTML</a></li>

      <li><a href="#css-questions">CSS</a></li>

    </ul>

  </nav>

</header>

<main>

  <form class="formrow" method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">

    <section role="region" aria-labelledby="student-info">

      <h2 id="student-info">Student Info</h2>

      <div class="info">

        <label for="student-name">Name:</label>

        <input type="text" name="student-name" id="student-name" />

      </div>

      <div class="info">

        <label for="student-email">Email:</label>

        <input type="email" name="student-email" id="student-email" />

      </div>

      <div class="info">

        <label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>

        <input type="date" name="birth-date" id="birth-date" />

      </div>

    </section>

    <section role="region" aria-labelledby="html-questions">

      <h2 id="html-questions">HTML</h2>

      <div class="question-block">

        <p>1</p>

        <fieldset class="question" name="html-question-one">

          <legend>

            The legend element represents a caption for the content of its

            parent fieldset element

          </legend>

          <ul class="answers-list">

            <li>

              <label for="q1-a1">

                <input type="radio" id="q1-a1" name="q1" value="true" />

                True

              </label>

            </li>

            <li>

              <label for="q1-a2">

                <input type="radio" id="q1-a2" name="q1" value="false" />

                False

              </label>

            </li>

          </ul>

        </fieldset>

      </div>

      <div class="question-block">

        <p>2</p>

        <fieldset class="question" name="html-question-two">

          <legend>

            A label element nesting an input element is required to have a

            for attribute with the same value as the input's id

          </legend>

          <ul class="answers-list">

            <li>

              <label for="q2-a1">

                <input type="radio" id="q2-a1" name="q2" value="true" />

                True

              </label>

            </li>

            <li>

              <label for="q2-a2">

                <input type="radio" id="q2-a2" name="q2" value="false" />

                False

              </label>

            </li>

          </ul>

        </fieldset>

      </div>

    </section>

    <section role="region" aria-labelledby="css-questions">

      <h2 id="css-questions">CSS</h2>

      <div class="formrow">

        <div class="question-block">

          <label for="customer">Are you a frontend developer?</label>

        </div>

        <div class="answer">

          <select name="customer" id="customer" required>

            <option value="">Select an option</option>

            <option value="yes">Yes</option>

            <option value="no">No</option>

          </select>

        </div>

        <div class="question-block">

          <label for="css-questions">Do you have any questions:</label>

        </div>

        <div class="answer">

          <textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>

        </div>

      </div>

    </section>

    <button type="submit">Submit</button>

  </form>

</main>

<footer>

  <address>

    <a href="https://freecodecamp.org">freeCodeCamp</a><br />

    San Francisco<br />

    California<br />

    USA

  </address>

</footer>

[Sparv1]

Hi!

You only linked the html part, but the issue seems to be in the css that you quoted.

I think you used the wrong type selector, as you should target the class of “form row”. Like this:

.formrow {

top-margin: 10px;

padding: 0 10px 0 10px;

font-size: 10px;

}

Hope this helps!

[Blazer2k22]

Thank you,i appreciate it.

[albacecilia10]

Hello. I had the same issue. Kind of fun the answer,
You have your css code right, but is missing the input element,
like this:
.formrow {
margin-top: 30px;
padding: 0px 15px;
}

input {
font-size: 16px;
}

[MODELMADE5]

Thank you so much!!!