Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Basics Understanding Values and Units Em and Rem Units

NGUYEN HAI TU VO
NGUYEN HAI TU VO
1,268 Points
Posted by NGUYEN HAI TU VO
NGUYEN HAI TU VO
1,268 Points

Hi guys, the qs is to have h3 at 20px using but still keep the result of the precedent exercise

.education { font-size: 16px; }

h2 { font-size: 3em; }

h3 { font-size: 0.416666666em; }

style.css 
/* Complete the challenge by writing CSS below */

html {
  font-size: 16px;
}

header {
  font-size: 1.5em;
}

.heading {
  font-size: 5rem;
}

.education {
  font-size: 16px;
}

h2 { 
  font-size: 3em;
}

h3 { 
 font-size: 0.416666666em;
}
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>

1 Answer

Steven Parker
Steven Parker
231,236 Points
Steven Parker
Steven Parker
231,236 Points

Your math is a bit off. Based on the parent font size of 16px, the equivalent em setting for 20px would be a bit larger (and require fewer digits).

Also, there's no "education" class in this document, and no instruction in the challenge to create any CSS for one.

Caleb Kemp
Caleb Kemp
12,755 Points
Caleb Kemp
Caleb Kemp
12,755 Points

You're almost there, as Steven Parker mentioned, the problem is your math is just not quite right. We're told that the parent element is 16px wide. We need to multiply that by some number (your em value) so that 16 x that number = 20. Right now your em value for h3 is 0.416em, so 16 * 0.416em = 6.67px which is to small. To find the right size all you have to do is take the number you want and divide it by 16, here are a few examples.

Example 1. make h3 have a value of 8px

-> 8/16 = 0.5 -> h3 fontsize: 0.5em;

Example 2. make h3 have a value of 22px

22/16 = 1.375 -> h3 fontsize: 1.375em;

Hope that helps