Docs

Overview

Features

• Accessibility check for being able to double font size at max browser zoom

• Accessibility check for font size increasing on each zoom

• Reverse clamps (allowing smaller sizes on desktop and larger sizes on mobile)

• Also reads fluid variables that were created outside of the app

• Toggle between static and dynamic values

Get the App (affiliate link)

Fluid Builder App - Webflow Apps & IntegrationsWebflow

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.

Setup

1. Select a size variable to apply a fluid size

Select any size variable from the dropdown and a fluid value will be applied to that variable in the variable panel

2. Set the max size

This is the largest that the size will be allowed to grow to

3. Set the min size

This is the smallest that the size will be allowed to shrink to

4. Set the max viewport

The size will stop scaling up at this screen size

5. Set the min viewport

The size will stop scaling down at this screen size

Other features

Connect the viewport max & viewport min to number variables

Connecting the viewport max & min to number variables allows us to easily edit the max and min screen size across multiple fluid variables

Ideally the max viewport should match the container's max width so variables stop scaling up when the container reaches its full width. The viewport-max variable can be used within the container's max width like this.

Static vs Dynamic

When the dynamic checkbox is checked, the viewport max and viewport min are saved within the variable value. So we can edit the max viewport, min viewport, max size, and min size outside of the app if needed.

Font Size Accessibility Check

This checks each font size to ensure the user can double the font size when reaching max browser zoom. If your font size variable has this red error, decrease the max size or increase the min size to pull the font sizes closer together. For any spacing variables, you can ignore this red error. This only matters for variables that will be used as a font size.

Screen Size Accessibility Check

This checks each font size to ensure the font size will increase each time the user zooms in. If your font size variable has this yellow warning, increase the max viewport size or decrease the min viewport size to push the viewport sizes further apart so the font size doesn't shrink too fast. For any spacing variables, you can ignore this yellow warning. This only matters for variables that will be used as a font size.