Rostyslav Nazarenko• 560
@rostyslav-nazarenko
Posted
Hi! Great code!
I found only a few issues with using absolute and relative units. I will explain as much as I can but here is a great article if you need more information.
- Generally, you would want to use relative units like
em
orrem
. Usingrem
is easier as it is based on the root font size which is by default 16px, but users can change it in the browser settings.em
is based on the parent element font size that way it is harder to set precise font size, read more in the article. - In your code you set
body { font-size: 15pt; }
.pt
is an absolute unit, which is used in print. In this case setfont-size
to0,9375rem
(15 / 16, 15 is your target size, and 16 is the default). - But then you set the font size of the
p
element to1rem
(and you override previous rule) which is 16px (by default) andh1
to22px
. This makesp
change its font size according to user preferences andh1
would be stuck and not change its font size. line-height: calc(1.27 * var(--header-font-size));
andline-heigth: 1.27;
mean exactly the same.
So, generally, people set font
in rem to the body
element which makes other elements inherit from body
Marked as helpful
1
Liam Malby• 20
@liammalby
Posted
@rostyslav-nazarenko thank you for your feedback! I have hopefully made some adjustments to the way I do things in the most recent challenge I completed :)
0