Docs

1. Overview

Get the App (affiliate link)

Fluid Builder & Webflow Integration - Webflow AppsWebflow

How Fluid Sizes Can Improve Accessibility

When users zoom in on their browsers, the site eventually reaches a new breakpoint where sizes are reduced to prevent overflowing content. Normally, increasing the font size preference would 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.

2. Setup

Fluid Sizes Component

The app creates this component to store the CSS for your fluid sizes.

Add this component to every page.

Do not rename this component.

Max Screen Size

Fluid sizes will stop scaling up and reach their max value at this browser width.

It's usually best to match this with your container's max width.

Min Screen Size

Fluid sizes will stop scaling down and reach their min value at this browser width.

Max Value

The largest value of the variable. This is usually its desktop size in a design.

Min Value

The smallest value of the variable. This is usually its mobile size in a design.

Delete

Removes the fluid css value from the component. Does not delete the variable in the variable panel.

Options (3 dots)

This allows us to change the max & min screen size for an individual variable without affecting other variables that share the same max & min screen size.

Creating multiple breakpoints

The Fluid Builder App uses css clamp which can only accept one max screen size and one min screen size for each fluid variable. We can create multiple "breakpoints" though with custom code. In this example, we've created a clamp on an extra variable (--h1-font-size-desktop) which doesn't exist in the variable panel. Then we use custom code in an embed to replace the value of our main --h1-font-size variable with this larger clamp variable on larger breakpoints. When doing this, it's important to compare the largest size (70px) with the smallest size (30px) to ensure it still passes accessibility requirements.

<style>
@media screen and (min-width: 48rem /* 768px*/ ) {
    :root {
        --h1-font-size: var(--h1-font-size-desktop);
    }
}
</style>