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 (2014) Understanding Values and Units Em and Rem Units

Posted by Eric Cowger
Eric Cowger
1,086 Points

I keep getting the wrong answer in the CSS Basics quiz. I don't know how to get help finding the answer.

I can't progress with the class because I'm not able to answer the question in the quiz or find my way to the correct information.

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

header {
  font-size: 1.8em;
}

.title {
  font-size: 1.625rem;
}

h1 {
  font-size: 5.625rem;
}

h2 {
 font-size: 3.312em;
}
index.html 
<!DOCTYPE html>
<html>
  <head>
    <title>Lake Tahoe</title>
    <link rel="stylesheet" href="page.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <header>
      <span class="title">Journey through the Sierra Nevada Mountains</span>
      <h1>Lake Tahoe, California</h1>
    </header>
    <div class="main-content">
      <p>
        Lake Tahoe is one of the most breathtaking attractions located in California. It's home to a number of ski resorts, summer outdoor recreation, and tourist attractions. Snow and skiing are a significant part of the area's reputation.
      </p>
      <a href="#">Find out more</a>
      <h2>Check out all the Wildlife</h2>
      <p>
        As spawning season approaches, the fish acquire a humpback and protuberant jaw. After spawning, they die and their carcasses provide a feast for gatherings of mink, bears, and Bald eagles.
      </p>
      <a href="#">See the Wildlife</a>
      <h3>From Tents to Resorts</h3>
      <p>
        Lake Tahoe is full of wonderful places to stay. You have the ability to sleep in the outdoors in a tent, or relax like a king at a five star resort. Here are our top three resorts:
      </p>
    </div>
    <footer>
      <p>All rights reserved to the state of <a href="#">California</a>.</p>
      <a href="#top">Back to top &raquo;</a>
    </footer>
  </body>
</html>
Ricky Simpson
Ricky Simpson
4,652 Points
Ricky Simpson
Ricky Simpson
4,652 Points

Hi Eric you're very close. For your h2 font size. Try using 4 decimal places 3.3125em.

4 Answers

jcorum
jcorum
71,830 Points
jcorum
jcorum
71,830 Points 
.title {
  font-size: 1.625rem;
}

h1 {
  font-size: 5.625rem;
}

h2 {
  font-size: 3.3125em;
}

h3 {
  font-size: 1.25em;
}

To get the em values you need to divide. E.g., for the last one 16px / 20px = 1.25

Martin Nørskov Jensen
Martin Nørskov Jensen
17,612 Points
Martin Nørskov Jensen
Martin Nørskov Jensen
17,612 Points

Hi! I have looked at the challenge and it looks like you just have done the math wrong, because the answer to the challenge is:

/* Complete the challenge by writing CSS below */

header {
  font-size: 1.8em;
}

.title {
  font-size: 1.625rem;
}

h1 {
  font-size: 5.625rem;
}

h2{
  font-size: 3.3125em;
}

h3{
  font-size: 1.25em;
}
Carlos Federico Puebla Larregle
Carlos Federico Puebla Larregle
21,074 Points
Carlos Federico Puebla Larregle
Carlos Federico Puebla Larregle
21,074 Points

The h2 font-size should be "3.3125em" Remember to do the 53 / 16.

h2 {
    font-size: 3.3125em;
}

And in the next task the h3 rule is going to be like this:

h3 {
  font-size: 1.25em;
}

I hope that helps a little bit.

Eric Cowger
Eric Cowger
1,086 Points
Eric Cowger
Eric Cowger
1,086 Points

Thanks everyone!! Looks like I need to go out one more decimal point to get this right.