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 Rem Units

Posted by Bryan Flanigan
Bryan Flanigan
2,617 Points

My font size is not being reset like instructor said it would. I have checked syntax for 20 min and cannot figure it out

Can someone please help me figure out rem units and why my font is still so large in the heading? 

/* Type Selectors ------------------ */

body {
  color: #878787;
  margin: 0;
  font-size: 1em;
}

h1 {  
  font-size: 5.625rem;   /* 90px / 16px */
  color: white;
}

h2 {
  font-size: 53px;
}

h3 {
  font-size: 20px;
  color: #48525c;
}



/* Pseudo-classes ------------------ */

a:link {
  color: orange;
}

a:visited {
  color: lightblue;
}

a:hover {
  color: forestgreen;
}

a:active {
  color: lightcoral;
}

/* ID Selectors -------------------- */

#main-footer {
  padding-top: 60px;
  padding-bottom: 60px;
  border-bottom: solid 10px orange;
}

/* Class Selectors ----------------- */

.main-header {
  background-color: orange;
  font-size: 2em;
}

.title {
  color: white;
  font-size: 1.625rem;  /* 26px/16px */
}

.primary-content, 
.secondary-content {
  width: 60%;
}

.primary-content {
  text-align: center;
}

.t-border {
  border-top: 2px solid lightgrey; /* Top border styles */
}

Moderator Added Markdown for Readability

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Well, in your h1 for example you have a font size of 90px. That's fairly large. Were you perhaps supposed to change something there?

Bryan Flanigan
Bryan Flanigan
2,617 Points

Jennifer, thanks for the help. I added the rem which, according to the css instructor was supposed to make everything relative. He kept his h1 at 5.625 rem as well. He said it was no longer relative to the 2em font size of .main-header. They are now relative to the default 16px font size of the root html element. I don't really understand that but his refresh shrunk his font down.

1 Answer

Sam Donald
Sam Donald
36,305 Points
Sam Donald
Sam Donald
36,305 Points

Assuming you want the 90px output, It's possible you're root level isn't 16px. Try setting root in your css

html {
  font-size: 16px;
}

/* or set you h1 to a px value to see if it behaves as you think it should */
h1 {
  font-size: 90px; /* or 30px etc... */
}

If it's not behaving correctly it could be you specificity. I don't have access to the build but remember css cascades, so if something down below like .main-header or .title is a class of h1 then it's more specific and will overwrite or, with em's and rem's may cause weird, funny math junk to happen.

Also, here's a good article on EM vs REM.