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 () 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 () below!
Agree with a comment or answer? Like () to up-vote the contribution!
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)?
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?
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…
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)
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.
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?
At the very beginning the environment says “No response received from web browser” despite of the actual solution. The bug is at least two years old by now and no one cares to fix it. In addition, for some unknown reason it is not possible to skip this stage, although I bet it would be possible in case I have a paid subscription.
) below.
) to up-vote the contribution!
