Fluid responsive

Close video
Make your website fluid responsive visually in rems, without writing custom css or caclulations.
There are two options for making your Webflow site fluid response
  1. Use the visual css snippet configurator on this page
  2. Use the same visual configurator in Finsweet Extension

What is fluid-responsive?

As the browser viewport changes size, the design scales with it.

How is this different from vw and vh scaling?

Using vw or vh units is one way to make your content fluid responsive. The problems with this method are:

  • You have to set sizes on every element you want to be fluid responsive.
  • Things could quickly become too small or too large because of a linear scaling.
  • Accessibility suffers because both vw and vh units cannot be affected by browser zooming.
  • It can be challenging to manage and maintain your Webflow project, especially for other developers and clients.

Root-font based scaling is more powerful!

What is root-font based scaling and why is it better?

Client-first system uses rem units for all its sizes, and rem unit is based on only one thing - html root font size.

By modifying this size we are effectively making our rems "larger" or "smaller" visually. Our visual fluid-responsive builder runs on an extensive set of calculations that modify root font size according to your preferences. Adding the generated css code makes your build follow new size scaling rules. All in rems!

Benefits:

  • Continue using Client-first as normal. This new fluid responsive strategy is an optional add-on to Client-first. Add it, or don't add it, to any project.
  • Browsers can zoom normally.
  • Browser font size settings that are modified by end-users will be respected.
  • Maintaining a Webflow project in rems is easier than a project with fixed vw- or vh- based sizing.

Read our full article comparing Client-first fluid responsiveness to the wizardry method.

Visually build fluid responsiveness

  1. Visually configure your fluid responsive scaling rules.
  2. Copy the css code to your Client-first Webflow project.
  3. Enjoy your fluid responsive site in rems.
Video tutorial and further explanation coming Jan 2022.

Use Finsweet Extension

Use the same visual css configurator inside Webflow Designer with Finsweet Extension

Next: Accessibility

Read Webflow-specific accessibility notes and learn about our upcoming accessibility plans.
fs-arrow-icon