Streaming live at 10am (PST)

Calc function to allow true responsive scaling of Fonts and Elements with VW units


#1

Hi,

I think it would be a huge benefit if you allowed the use of the calc function in the editor. Calc obviously has many uses, but one key one for me (and I would guess many other users), would be that you can use it with VW and VH units, to create elements and fonts that have true responsive scaling (where you can control the rate of scale) - without the need for any breakpoints.

This not only allows you to do some really neat design tricks, but also helps you greatly simplify your code (as the need for breakpoints can be significantly reduced - or event totally removed).

Here are some articles that detail how you can combine calc and vw & vh units to create true responsive fonts:




I used these as a basis to create my own font scaling method - the below will create a font that is 20px at 320px viewport width and changes at a rate of 50% (IE it would be 30px at 640 viewport width)

h1 {
font-size: calc(20px + (20 * 0.5 * ((100vw / 320) - 1px)));
}


CSS Calc support
#2

@chillikid You can use VW and VH in Webflow. Just type in any value you need and a VW after it in the width and it will work.

Example: 50VW

Is that your question?


#3

Hi,

I'm aware that you can use the VW and VH values directly - but you need to use them within the 'calc' function (which is currently not supported), to be able to control the rate of scale. If you read any of the articles I attached they walk you through the process of how to do this and why the calc function is required / can be used to control how things scale with respect to Viewport.


#4

Almost a year and no updates about calc!


#5

+1 here for calc support..


#6