Changing finished webpage units from px to rem & em

Design help General
1

As the title suggests, I want to change the webpage’s sizing from px to rem and em.

I finished creating the whole page but I used pixel unit everywhere for sizing elements. Now my manager has asked me to change the units to rem and em where it makes sense.

I understand that I will have to figure it out on my own and test the page when I switch units but is there any plugin or some AI tool that can automate this.

Let me know, thanks!

2

I don’t know any webflow plugins that can help do that. I have found this though - GitHub - cuth/postcss-pxtorem: Convert pixel units to rem (root em) units using PostCSS
If it’s just a matter of single page and it’s not too long, you can do it manually.
Online px to rem, em calculators like this one can help - PX to REM Converter (With Live Font-Size Preview)
Just saw and found that they also have chrome extension which could be convenient. You can try if you want or just use online calculator to calculate the rem and em values for the pixel values in your design.
Good luck!

3

It’s very to convert px to rem using finsweet extension migrator here is link Finsweet Chrome Extension for Webflow

4

There are actually 5 webpages that need unit changed. After posting here I actually started changing the units manually. I found this video which shows the trick to calculate the px to rem directly in webflow which helped a lot. - https://www.youtube.com/watch?v=Tp7iHSEG1qc

I am done changing units on 3 pages but using the trick mentioned in video is a lot of keyboard work. I am going to try the calculator and extension you mentioned.

Thanks.

1 Like