Change Webflow Breakpoints from Pixels to REM

Hey Webflow team and community,

I'd love to see Webflow offer the ability to set breakpoints using REM units instead of pixels.


Why REM instead of PX?

  • Scalability: REM-based breakpoints would allow for more responsive and scalable designs. With REMs, designs could scale fluidly based on the user's browser settings or accessibility needs, making them more adaptable for users with custom font sizes or larger screens.

  • Consistency across Devices: REMs help maintain consistent proportions across different screen sizes and devices, which is especially useful for designing responsive layouts. No more adjusting every element manually—set it once, and let REM take care of the rest.

  • Better Accessibility: Using REMs can help create more accessible web experiences. Users who need to adjust their browser's base font size would experience layouts that adapt accordingly, making the web more inclusive.

  • Improved Workflow: For developers and designers used to modern CSS practices, REM is a go-to unit for creating responsive, accessible, and future-proof designs. Integrating it natively into Webflow's breakpoints would align Webflow with modern web standards.


Suggested Implementation:

  • Allow users to set base font size (e.g., 16px = 1REM) within the project settings.

  • Provide an option in the breakpoint settings to switch between PX and REM.

Thanks for considering this! I believe this would take Webflow's responsive design capabilities to the next level and align it more with modern CSS practices.

  • Christian Kaiser
  • Sep 18 2024