Use basic math functions in the Style panel to get your designs pixel perfect.
What is 5 plus 2 times 2 divided by 2 plus 7 times 2 times 3 divided by 2 times 5 divided by 7?
[Grimur] 35.
[Miguel] What are we doing? We’re doing arithmetic. And so is my phone.
But that’s not the only thing doing arithmetic. We can do it in Webflow too.
I’m constantly adding and subtracting pixels, rems, ems, percentages — right in the Style panel.
If I wanna subtract 80 pixels from this 210 pixels... could I do all that in my head?
Of course I can. But I’m very busy, so I can just type it right into the input field and press return. And it’s done for me.
And it’s not just adding and subtracting.
What if I had to mix arithmetic? (What if I want to take 130 multiply it by 2, and add 10?) Press Return? And it’s done for me.
All of this follows P.E.M.D.A.S.
[Grimur] Haha. What?
[Miguel] Technically, M.D.A.S.
[Grimur] Okay.
[Miguel] Please excuse my dear aunt sally?
[Grimur] Please excuse who?
[Miguel] It’s the mnemonic we use to remember the basic order of operations. In math. The M.D.A.S. part is the order in which multiplication, division, addition, and subtraction are calculated. Grimur?
[Grimur] Mmm? Sorry, I fell asleep somewhere around “mnemonic.”
[Miguel] It does. And that’s arithmetic in the Webflow Designer.
Calculating exact values can sometimes be difficult when moving from one app to another. In the Webflow Designer's Style panel, you can use basic math functions and easier calculations to get your designs pixel perfect.
Something went wrong while submitting the form. Please contact support@webflow.com