FAQ: Sizing Elements - Em

This community-built FAQ covers the “Em” exercise from the lesson “Sizing Elements”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

Learn Responsive Design

FAQs on the exercise Em

There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply (reply) below.

If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

so in what cases, we have to use px and when em? thanks

The example used in this task has left me quite confused. It states that the font-size of 1.5em is equal to 27 pixels, but surely it should be 24 pixels (16 * 1.5)?

Is there any details I am missing?

Thanks

KJ

1 Like

16 pixels is the default font size, but here font size is defined as 18 pixels. So the font size of h1 elements will be 18*1.5=27

2 Likes

Whoops, I missed the default 18px font size size.

Thank you!

2 Likes

Hi question about em and rem units. If we are hard-coding the base font size and root element font size in px, wouldn’t the value of the em and rem units always be the same regardless of browser size because the values the relative too are hard coded? Wouldn’t this defeat the purpose of responsive design?

1 Like

Hello! I’m working on the Bana’s Travel Blog exercise and for question #1, it asks us to set the font size to 1.5 em in #banner h1. Here is my code:

#banner h1 {

font-family: ‘Roboto’, sans-serif;
font-weight: 300;
font-size: 1.5em;
color: white;

}

The font size increases, but I still receive an error message: Did you sent the font size to 1.5em?

It seems to me that this is what I’ve done. I include a screenshot.

Thanks for any helpful commentary!
MP

I failed to get past the first question without getting the solution. Which looked the same as my answer-- which was rejected. Is this a bug?

https://www.codecademy.com/paths/learn-how-to-build-websites/tracks/responsive-design-and-accessibility/modules/learn-responsive-design-module/lessons/sizing-elements/exercises/em

Hiya, I also get the same message. I will try to report it as a bug. The solution looks much the same as mine. And the same problem occurs in the next exercise…

Same problem here I also reported that as a bug waiting for a fix or an answer.

This still has not been fixed.

For some reason, this page only accepts conversions into px as correct

eg. .post h2 {
font-size: 28px;

Later on, you will come across rem. However, between px and em, you would only use px when wanting to set a fixed size to an element no matter the size of anything else. em on the other hand, would be used when wanting to size an element relative to the font-size property of its nearest set parent element. If it’s parent element doesn’t have an explicit font-size, it will be sized relative to its grand-parent element’s font-size. This cycle goes on unitl it gets sized relative to the html element’s font-size property which by default is (most of the times) 16px

There is one important concept to be aware of. em is relative to the element’s nearest parent element with a set font-size. Here’s an example to illustrate this concept:

<div>
  <h1>I have a font size of 20px</h1>
</div>
div {
  font-size: 10px;
}

div h1 {
  font-size: 2rem; /* 20px */
}

In the example above, the <h1> element will have a font size of 20px as its parent element has a font size of 10px. In this case, 2rem is equal to 10px * 2 which is 20px. However, look at this example:

<div>
  <h1>I have a font size of 32px</h1>
</div>
div h1 {
  font-size: 2rem; /* 32px */
}

In the example above, the <h1> element will have a font size of 32px. This is because we didn’t actually explicitly give the <h1>'s parent element a font size. This means that it will check if it’s grandparent element has a set font size. The <body> element doesn’t have an explicitly set font size either! Finally, it check if the <html> element has a set font size. Even if we didn’t set the <html> element’s font size, the browser gives it a default font size (in most cases, 16px). This means that 2em in this case is equal to 32px (16px * 2 = 32px)

1 Like

It depends. If an element’s font-size property is relative to the <html> element’s font-size property, then it will adapt to the user’s browser preferences. This is because the browser actually sets the <html> element’s font-size, and when the user modifies the user preferences, the browser changes which value it sets to the <html> element.

It depends if we make the element with a hard-coded font-size property responsive or not. We could use media queries (which you will learn in future lessons) to make the element smaller depending on the screen size the web page is viewed on. We can also use media queries to adjust the font-size property of an element depending on the screen size the web page is viewed on. When this happens, the em and rem units will adapt to the screen size as well

What is the point of using em instead of px?
It seems to me that we are swapping in one hard-coded value for another.
Is it because for devices with smaller/larger displays, the em value would be different?

Peev. If an explanation contains more than 2 prepositional phrases or an ‘of,… of … of’ overdose, that explanation is a chained confusion equation. Review the content below the css code. When I encounter this sentence structure, I deconstruct and reconstruct the sentence. Upside, its like reading the content four times. Downside, there is no guarantee the intended message has been communicated and it makes a short day long. Get an editor.

.splash-section {  
font-size: 18px;
} 

.splash-section h1 {  
font-size: 1.5em;
}

The example above shows how to use ems without relying on the default font size of the browser. Instead, a base font size ( 18px ) is defined for all text within the splash-section element. The second CSS rule will set the font size of all h1 elements inside of splash-section relative to the base font of splash-section (18 pixels). Seriously, this couldn’t be written better?