REM not working

Hello,

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 ?

here is my read only : Webflow - Moto




Here is my site Read-Only: LINK
(how to share your site Read-Only link)

@anthonysalamin

Get rid of the font size on your paragraph class:

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:

Hi @sam-g

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 :stuck_out_tongue:

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:

image

image

image

image

image

image

1 Like

REM = Font size of the root element.