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

Benton Demeter
Benton Demeter
15,116 Points
Posted by Benton Demeter
Benton Demeter
15,116 Points

h2's parent element has a font-size of 16px. Use an em unit to give the h2 a value equivalent to 53px. 3.313em is bad??

create a new rule that targets h2. The h2's parent element has a font-size value of 16px. Use an em unit to give the h2 a font-size value equivalent to 53px

That is the question is this CSS Basics quiz. However when I enter the h2 element and use 3.313em. It gives me the "bummer" answer. What am I doing wrong?

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.313em;
}
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>

10 Answers

Viet Nguyen
Viet Nguyen
2,596 Points

you rounded up. the value should be 3.3125em

Benton Demeter
Benton Demeter
15,116 Points
Benton Demeter
Benton Demeter
15,116 Points

Thanks! I figured it was something much simpler then I was looking for.

Godwin luke
Godwin luke
931 Points
Godwin luke
Godwin luke
931 Points

HI I have a question?. What do u mean when u say "you round up the value to be 3.3125em" how exactly!!!??? i'm LOST....

Cristina Davis
Cristina Davis
10,860 Points

Still not working

Fabrice Bonello DuPuis
Fabrice Bonello DuPuis
1,217 Points
Fabrice Bonello DuPuis
Fabrice Bonello DuPuis
1,217 Points

I've been having the same problem, however both values (3.3125 and 3.313) still do not work!

Any takers?

williamkempster
williamkempster
4,524 Points

I am having the same issue!

Cristina Davis
Cristina Davis
10,860 Points

What’s was the code?

Brent Rainwater
Brent Rainwater
3,802 Points

same here and you can't go past this

Ary de Oliveira
Ary de Oliveira
28,298 Points
Ary de Oliveira
Ary de Oliveira
28,298 Points

header { font-size: 1em; }

.title { font-size: 1.625em; }

h1 { font-size: 5.625em; }

h2 { font-size: 3.3125em; }

Jesse Hall
Jesse Hall
4,275 Points
Jesse Hall
Jesse Hall
4,275 Points

Glad the website they give us rounds up and they don't take that into account. Thank you all for catching that.

Greg Saunders
Greg Saunders
5,263 Points
Greg Saunders
Greg Saunders
5,263 Points

h2 { font-size: 3.3125em; }

Simple division :)

Grant Moran
Grant Moran
5,918 Points
Grant Moran
Grant Moran
5,918 Points

I had the same result as the original poster. I figured out it was due to rounding as well. The reason for this was because I used the http://pxtoem.com/ tool recommended.

If the base pixel is set to 16 and you enter 53 in the px to em field and click convert the result is: 3.313em. This however does not work. Took me a moment to figure out I was using it incorrectly. Hopefully this can help others trying to breeze through the code challenge.

channonhall
channonhall
12,247 Points

20 px to em's is 1.250 em's BUT STILL THE CODE CHALLENGE SAID BUMMER!!!!!!!!

BUT THIS WEBSITE IS BETTER http://www.w3schools.com/tags/ref_pxtoemconversion.asp WHAT?!?!!?!?!?!?!?!?!?!!?!?!?! THE?!?!?!?!!?!?!? HELL!?!?!?!?!?!?!

Antonio Bellu
Antonio Bellu
2,701 Points
Antonio Bellu
Antonio Bellu
2,701 Points

I recommend using the W3C website for conversion: http://www.w3schools.com/tags/ref_pxtoemconversion.asp

Lee Zhi Xian
Lee Zhi Xian
1,917 Points
Lee Zhi Xian
Lee Zhi Xian
1,917 Points

h2{ font-size:3.3125em; }

Pedro Morales
Pedro Morales
1,574 Points

Thanks for your help. that one work.

Marvin Ndifon
Marvin Ndifon
6,704 Points
Marvin Ndifon
Marvin Ndifon
6,704 Points

first change the header{ header{font-size: 1em; } h2{font-size: 3.3125em } font-size: 1.8em; TO THEN
}

darrin allen
darrin allen
7,775 Points
darrin allen
darrin allen
7,775 Points

should we use 4 decimal places? It seems to work