Guide: How to Use Fluid Design in Webflow (with Calculator)

Have you ever heard of Fluid Design? I like to describe it as an upgrade to responsive design. It allows you to scale your website layout at a specific breakpoint. Especially with the desktop breakpoint in Webflow, the design quickly looks squashed when you make it smaller down to 991 px wide. You can avoid this by activating the Fluid Design right then.

On the one hand, we are looking at the Wizardry method by Timothy Ricks and also the Client First variants of Finsweet. Starting at 9:04 you also have step-by-step instructions on how to use the Fluid Design calculator for your layout and then integrate the whole thing into the website (example using a client first template with REM units).

important! This method only works if you're working with REM or EM!

Finsweet Fluid Design calculator: https://www.finsweet.com/client-first/docs/fluid-responsive