I have a question regarding REM unit. How do we make it work ?
I have set the body to be 16px on desktop and 12px on mobile.
I have set the paragraph to be 1rem size but on mobile it still display as 16px instead of 12px like the body. How can I do ?
REM unit size inherits from the nearest parent, so the 1 REM on that class is overriding what you set on the body. My recommendation would be to set this on the global body tag:
Thank you very much for having taken a look !
I have killed the custom body class and tweaked the “all-body” class instead.
Unfortunatel, it is still not working.
Regarding the font size for the paragraph, I don’t understand why I should remove the rem unit since this is precisely what I would like to set: the size of the paragraph in rem.
@anthonysalamin - this is totally fair, and in all honesty I literally didn’t sleep last night so maybe I shouldn’t be trying to answer questions on here today
However, try this, in your project settings add this code to the head or just toss it in an embed for testing on that page:
<style>
html {
font-size: 20px;
}
@media screen and (max-width: 768px) {
html {
font-size: 14px;
}
}
</style>
You can then play with REMs to your hearts content on any element:
