SOLVED: Cannot select units on font size (rem, em, etc)

Bricks Version: 1.51rc
macOS
URL: (a link to a page that illustrates the issue would be really helpful)

Cannot select REM on font size. Its also not showing options ie, EM, REM, %, VW etc.

Hi Tim,
There is no separation between value and unit anymore. You can write the unit of your choice directly into the field. The same applies to the spacing (margin & padding) and other fields.

Bildschirmfoto 2022-08-30 um 22.01.56

Best regards,
timmse

Yes, Thanks, I already have figured that out, but in certain cases, using 3rem does not work, 3em does, as does 3px etc. I hope that makes my point clearer, I have verified and its a bug. if you need more info please ask

Hi Tim,
Please show and explain the problem as a screencast - I can’t reproduce it.

Seems like the dafault value for the “rem” currently (1.5.4) is 10px. It should be coming from the browser…usually 16px. Is that the case? The “em” value is based on the font size of the body font, which I can control… Do I understand it correctly?

You can adjust the html % for this in the theme settings if you want any rems to be something else

Hi, and thank you for your reply. I can’t locate that setting for the %. Could you point me with a screenshot?

Thanks!

Go to Settings → Theme styles → Typography → set HTML: font-size to 100% and that shouls work :smiley:

1 Like

Should pay more attention. It’s all there always

image

Glad you found it - hope it helps :raised_hands:

Out of curiosity; what’s the reason the default in Bricks is set to 62.5% of the 16px which results in the 10px? Why not using the standard of 16px default from the start?

Thank you!

It’s done to make px to rem calculations much easier.

If html body font size is set to 100%, 16px = 1 rem. This makes trying to calculate rems from pixels a little harder. For example if I want 20px of space and I’m using rems, then the rem size is 20/16 = 1.25rem.

If html body font size is set to 62.5%, 10px = 1 rem. Calculations are therefore much easier as you just divide the pixels by 10 to get rems, so 20px would be 2 rem.

At my age, I’ll take the easier calculation!

2 Likes

You serious? That’s it? Thank you for letting me know. I am sticking with training my brain…

The problem is, when you start to use some plugin (chat plugin, cookie notice…) that have units in rem and suddenly everything is small and you need to fix this manually. That’s why I always set 1rem = 100%.

After a while, you get used to values. :slight_smile:

1 Like

Good point. The rem vs em and then the default vs 10px in bricks kept me confused for few designs. Part of it is I know very little CSS code. I understand it in theory. Should learn it, though!