Calculate size values (convert px to rem)

When using rem units, it’s often difficult to know what the pixel equivalent is.

Figma only allows pixel units, so when converting a design, you have to pull out a calculator to figure out what 26px is in rem units.

One cool feature Webflow has is the ability to calculate values inside of a field.

For example, you could enter: =26/16, and it’ll automatically convert it to 1.625.

This would make working with rem units a lot easier!

1 Like

A quick hack you can do to make rem easier to calculate is setting the root font size to 62.5% that way 1rem = 10px. If you do that don’t forget to set the body font size to at least 1.6rem to make the body text back to 16px and not create accessibility issue. But knowing your backgroud I guess you already know that your article about page builders is why I am here haha

1 Like

I’ve actually done that on a few sites, but have decided to go au naturel and do it the right way moving forward.

There isn’t really a strong case against it, but there have been a couple times when I ran into compatibility issues when using a tool or a CSS generator that only works with a 16px base.

It feels a little less ‘hacky’ too. But I definitely miss being able to convert units easily!

P.S. awesome that you’re here because of the article.

1 Like

Yeah I’m totally with you on that, I don’t really like changing the root size it doesn’t feel right to me for some reason. Haven’t used webflow myself but being able to calculate it in the field look like a very convenient feature for sure !

1 Like

Not a big fan as well of touching the root font size, as it comes with, in my opinion, too many downsides.
Not sure how I missed this request, but thanks for creating this very useful feature suggestion @sunny.

So, this will be available in the upcoming update with the most straight forward implementation I can imagine. Please keep this available as it is, even if or when “real calculation” is introduced.

Since I have fully transitioned to an all REM approach (at this point, thanks for all the recent improvements in terms of unit freedom), this will allow me to change the way I work with Cwicly yet another time.

Exited for this little addition.

2 Likes

Yes, this is another nice timesaver.

1 Like

Hey @Louis, thanks for implementing this!

Butttt… am I doing something wrong here?

When entering 16trem, it’s giving me a value other than 1.

CleanShot 2023-06-07 at 11.40.10

Strangely, on this site it’s 0.84xx, and on another it’s 0.88xx.

This is working now with 1.2.9.7.2.1 as well :slight_smile:

1 Like

Thanks for the feedback, @sunny :slight_smile:

Moving to “in-progress” for calculations and further optimisations with the root font-size, depending on where it is set.

Cheers,

1 Like