Fluid Responsiveness

Fluid Builder

Fluid sizes are vital for all Webflow projects

Fluid sizes improve accessibility by making font size preference work like browser zoom

When users zoom in on their browsers, the site eventually reaches a new breakpoint and sizes adjust to prevent overflowing content. Normally, increasing the font size preference should behave just like browser zoom, triggering those responsive changes. However on Webflow sites, increasing the browser’s font size doesn’t activate the next breakpoint because Webflow uses PX breakpoints instead of REM. As a result, text and element sizes continue to grow and overflow without the responsive adjustments designed for smaller screens.

Using fluid sizing with clamp() can solve this issue. Since clamp() isn't based on PX breakpoints, it allows sizes to respond just like they would with browser zoom, delivering a more accessible and consistent experience.

Using autofit grids with fluid sizes can make the experiences of browser zoom and browser font size increase exactly identical.

---

Getting Started

1. Max & Min Screen Sizes

Webflow Site Width

This is the maximum screen size at which sizes will stop scaling up. It should match the value of the site/width variable set in the variable panel. In most cases, the Webflow Site Width and Figma Design Width should be the same. If you want the design to scale larger than its original size in Figma, set the Webflow Site Width to be larger than the Figma Design Width.

Figma Design Width

This is the size of the Figma container plus any horizontal padding (usually the width of the entire Figma frame). This is used as the screen size that sizes should scale up or down from. If an element was 5rem in Figma, it will be this value at the screen size that matches our Figma Design Width.

Min Screen Size

This is the screen size at which sizes will stop scaling down. Our fluid sizes will all reach their smallest size at this minimum screen size.

---

2. General Size Variables

Any variables can be added into the General Variables. The --site--margin variable controls the horizontal space so that our container doesn't touch the edges of the screen. The --size variables can be used for font sizes, spacing, element sizes, and any other sizes on our site.

---

3. Scale Ratios

Scale Ratio groups are optional. There's groups for heading variables, text variables, & spacing variables. If we delete all heading, text, and spacing variables from the Fluid Builder, their sizes will be defined in the variable panel instead. Scale Ratios are not required for fluid responsiveness. By default heading, text, and spacing variables in the variable panel are connected to the --size variables which are already made fluid through the Fluid Builder.

When To Use Scale Ratios

To use scale ratios, the design should be created using these typography and spacing scale ratios in Figma. If the design wasn't created using scale ratios, it's better to select a fluid size directly from the variable panel to more closely match the design.

Benefits of Scale Ratios

Scale Ratios create a harmonious relationship between sizes and allow us to easily control a grouping of sizes. Imagine if the client later ask us to reduce all heading font sizes or increase all spacing. Without Scale Ratios, we would manually have to choose a different fluid size for each heading in the variable panel. But with scale ratios, we can reduce just the desktop ratio, just the mobile ratio, or both. By reducing the ratio, the larger sizes reduce the most which prevents the smaller sizes from becoming too small.

Setting Sizes When Using A Ratio

When using Scale Ratios, we always want to set the size of the smallest variable in the list. Each size is created by multiplying one size below the current size by the scale ratio. In most cases, we don't need to reduce the font size on mobile and instead can just reduce the Mobile Scale Ratio so that all the larger sizes become smaller without affecting the smallest size at all. In some cases, it can be helpful to reduce both the mobile font size of the smallest size and reduce the Mobile Scale Ratio.

---

4. Accessibility

Red Error Label

For a font size to be accessible, the desktop size can be no larger than 2.5x the mobile size. The same is true for both breakpoint-based font sizes and fluid font sizes. If the desktop font size is larger than 2.5x of the mobile size, the user won't be able to double the font size like required when reaching max browser zoom. If your size variable isn't used for font size, the red error label can be ignored.

Orange Warning Label

The orange warning label should be avoided at all cost for any size variable that could be used as a font size. This label appears when there's a 0rem or negative rem value in the clamp. In these cases the font size won't appear to change at all on zoom or will appear to decrease from an increased zoom until the min font size is reached. Orange warning labels are usually caused by placing the max and min screen sizes too close together. Pushing them further apart usually removes this issue.

---

5. Adding The Fluid Code To Webflow

Copy the code from the Fluid Builder, and replace everything in the page_code_responsive embed with this new fluid code. A url containing all your fluid settings will be saved in the embed in case you ever want to update these settings later. This url isn't required for the fluid code to work.

---

6. Video Tutorial

---

7. FAQs

Why is the fallback for older browsers off by default?

This fallback replaces the fluid sizes inside the variables with breakpoint-based variables instead on older browsers. However, it only improves browser support by roughly 1% and makes 2% of browsers that could normally run the fluid sizes use the breakpoint-based sizes instead. CSS Clamp(), used for fluid sizes, is supported in nearly every browser that supports CSS Variables, but clamp() has roughly 1% less support than variables. CSS @Supports can be used to only run fluid sizes in browsers that support fluid sizes, but @supports has roughly 2% less support than clamp(). So some browsers that would normally get fluid sizes when the fallback is turned off would get adaptive sizes instead when the fallback is turned on.