Docs
Last updated
Last updated
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.
The app creates this component to store the CSS for your fluid sizes.
Add this component to every page.
Do not rename this component.
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.
Fluid sizes will stop scaling down and reach their min value at this browser width.
The largest value of the variable. This is usually its desktop size in a design.
The smallest value of the variable. This is usually its mobile size in a design.
Removes the fluid css value from the component. Does not delete the variable in the variable panel.
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.
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.
