EM vs REM Code challenge

Question

Can someone please check my code and how I'm approaching the problem below? I'm not sure I'm understanding this at all.

style.css

/* Complete the challenge by writing CSS below */

html {
  font-size: 16px; /*Quiz says h2 has a parent values of 16px
  ...Which is this value*/
}

header {
  font-size: 1.5em;
}

.heading {
  font-size: 5rem;
}
h2 {
  3em; /*1em equals 16px. 48/16 equals 3. Shouldn't it be 3em?
  Or am I missing something? */
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Developer Diane: Resume</title>
  <link rel="stylesheet" href="page.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main>
    <header>
      <div id="header-box">
        <h1 class="heading">Developer Diane: Resume</h1>
        <address>
          <p>website: developerdiane.com</p>
          <p>email: diane@developerdiane.com</p>
        </address>
        <img src="developer-diane.jpg" alt="Developer Diane coding on her laptop.">
      </div>
    </header>          
    <section id="education">
      <h2>Education</h2>          
      <ul>
        <li>
          <h3><a href="https://teamtreehouse.com">Treehouse</a></h3>
          <p>Front End <em>Web Development</em> Techdegree</p>
          <p class="date special">Graduated January 2020</p>
        </li>
      </ul>
    </section>
    <section id="experience">
      <h2>Experience</h2>
      <ul>
        <li>
          <h3>Super Web Design Shop</h3>
          <p>Junior Developer</p>
          <p class="date special">February 2020-present</p>
        </li>
        <li>
          <h3>Pretty Good Websites, Inc.</h3>
          <p>Web Development Intern</p>
          <p class="date">July 2019-January 2020</p>
        </li>
      </ul>
    </section>
    <section>
      <h2>Skills</h2>
      <ul id="skills-list">
        <li class="top-skill">HTML</li>
        <li>CSS</li>
        <li class="top-skill" id="proud">JavaScript</li>
        <li>Git</li>
        <li>Bootstrap</li>
        <li class="top-skill">Mobile Web Development</li>
        <li>Accessibility</li>
      </ul>
    </section>
    <section>
      <h2>Awards and Achievements</h2>
      <ol>
        <li>Dev Ninja Award, November 2020</li>
        <li>Developer of the Month, October 2019</li>
        <li>Achieved rating of 6 kyu on <a href="https://www.codewars.com/">Codewars</a></li>
        <li>Certified Accessibility Specialist</li>
      </ol>
    </section>
    <footer>©2020 Developer Diane.</footer>
  </main>
</body>
</html>

Answer 1 · 2021-05-11T14:32:52Z

May 11, 2021 2:32pm

HI Rachel Masselle

Yes. You are correct in that the em value needs to be 3. However, you don't have what needs to be 3 in the rule. The challenge asks to make it that font-size, but you just have the value and no target. Have a look at the other rules in the challenge and then edit yours to match the structure.

Keep Coding! :)

Welcome to the Treehouse Community

Looking to learn something new?

Rachel Masselle

Rachel Masselle

EM vs REM Code challenge

1 Answer

Jason Anders

Jason Anders

Rachel Masselle

Rachel Masselle