Result summery component using HTML and CSS
Design comparison
Solution retrospective
When I first see this challenge I thought that I cannot do this, but after practicing few more times, this was possible, the challenges I found when making this project is , hard to find proper font size and font families. When I started to build this project, it was very hard to make changes to different screen sizes, so building a responsive design is still confusing to me, I have no proper idea where I use relative values such as 'em'. 'rem etc.. so if someone can give me some ideas , that would be great.
Community feedback
- @adityaphasuPosted over 1 year ago
Hi,
Let me explain rem and em with some examples:
rem
stands for root em which is relative to the root (html) font size. This means that if you set a property in rem, it will be calculated based on the root font size.
For example, say you have a heading in a page if you use rem then it will ba calculated based on the root font size which is set up in the html (mostly by default its 16px but in some cases people can change and specify it to other values as well)
html { font-size: 16px; } h1 { font-size: 1.5rem; //1.5 times the root size }
-
In the above code snippet
1.5rem
means1.5*16px = 24px
.In a different scenario say someone set the root font size to be 18px then h1 would be1.5*18px = 27px
. -
em is element em and is relative to the font size of the element itself or its nearest parent that has a font size set. For example, we have a parent element and inside it we have a child element and we set font sizes to both in em then:
html { font-size: 16px; // default } parent { font-size: 1.5em; // 1.5 times the parent's font size (1.5 * 16px = 24px) } child { font-size: 1.2em; // 1.2 times the parent's font size }
- In the code snippet the parent itself has a parent which is the html so the font size for the parent would be 1.5 times the html font size but child's parent is not html instead it's the parent font size (which now is 24px) and hence since em is inherited and based on parent size it would result in 1.2 times 24px (1.2 * 24px).
Therefore use
rem
when you want consistent sizing across the page and useem
for when you want sizes to be relative to the font size of a particular element example button paddings.I hope this gives you somewhat of an idea of how to use it. If you wanna read about more and their differences check this out!
Keep up the hard work and happy coding!🕺🏻
Marked as helpful0@iamdylanmjPosted over 1 year agogreat explanation, thanks a lot@adityaphasu
1 - @hitmorecodePosted over 1 year ago
Actually you did really good. Just a few tips
- You have position relative on the body, you don't need this. so you can remove it.
- On the body change height to min-height and try to make this a habit.
- Remove
align-items: flex-start;
this is preventing the card to be placed in the middle of the page on smaller screen size. - The font sizes and font-families you can find them in the challenge instructions. If you open the style-guide.md file you can se all the information you need.
- You can use rem anywhere you want, but specially for fonts it's good practice to use rem, em instead of px.
Marked as helpful0@iamdylanmjPosted over 1 year agoI really appreciate, thank you very much@hitmorecode
0 - @devaramnyePosted over 1 year ago0@iamdylanmjPosted over 1 year ago
thank you so much I watched the video you mention, I think now I have clear understanding 'rem' and 'em', again, thanks@devaramnye
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord