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

Ayan Basu
Ayan Basu
1,577 Points
Posted by Ayan Basu
Ayan Basu
1,577 Points

where is it going wrong?

The em unit to represent a font size of 53px is 53/16= 3.312em. Parent element has a font size of 16px ie 1em. Can u suggest where is it going 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;
}

.main-content: {
  font-size: 1em;
}

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>

5 Answers

Billy Bellchambers
Billy Bellchambers
21,689 Points
Billy Bellchambers
Billy Bellchambers
21,689 Points

This might be the issue.

You've got the right code to set parent font-size however the selector is wrong due to the addition of the colon on the end.

.main-content: {  <--- see the colon remove this and hopefully should fix the issue
  font-size: 1em;
}

Hope that helps.

Happy coding

Ayan Basu
Ayan Basu
1,577 Points
Ayan Basu
Ayan Basu
1,577 Points

Thanks a lot Billy but the problem still persists. Removed the colon, and even declared the parent font-size as 16px and then declared the 'h2' font size as 3.312em. But the same error msg that asks me to recheck whether em value is equivalent to 53px. Any other solutions please?

Ayan Basu
Ayan Basu
1,577 Points
Ayan Basu
Ayan Basu
1,577 Points

Oh this was frustrating and quite ridiculous! In the video lesson we see that typing till 3 places of decimal is enough for an 'em' value. And so I typed in 3.312em which is equivalent to 53px. And I had an error. Then tried typing in 3.3125em....DONE. I think this needs to be mentioned within the directions set for the answer or within the lesson content. And Thanks a lot Billy for pointing out my wrong syntax!!!

Rohit Tolawat
Rohit Tolawat
8,277 Points
Rohit Tolawat
Rohit Tolawat
8,277 Points

Hi Ayan, Good that you got it figured it out. But, you could also have used rem as the unit in case there was an issue with em. rem calculates the font sizes based on the size of root element which in this case is body and its default size is 1em or 1rem.

Ayan Basu
Ayan Basu
1,577 Points
Ayan Basu
Ayan Basu
1,577 Points

Hi Rohit, correct and thanks a lot! But the think is the according to the question asked in the Code Challenge I was supposed to answer only in terms of 'em' unit.