Centralizing Display Conditions in Bubble.io’s New Responsive Engine (breakpoints, media queries)

Hello everyone,

I’m currently developing pages on Bubble.io using the new responsive engine, and I’m trying to find the best practices for managing breakpoints (media queries in CSS) for these pages.

Specifically, I’m looking for a convention or a way of doing things that will help me define global breakpoints for all my pages, so that I can reuse my display conditions, which will be almost the same for all my pages.

I started by creating a reusable element that has different boolean custom states (for example: width => 1024px), and I used “Do When” workflows that trigger when the screen size changes. From there, the reusable element allows me to know if my screen is currently larger than 800px, larger than 1024px, etc.

However, in terms of performance, it wasn’t optimal, as I encountered some display glitches. As a result, I decided to try creating a Bubble plugin that does essentially the same thing, but with default values set upon initialization (I thought this might compensate for the display glitches that occur because the custom states are “No” or empty by default).

I’m curious to know what approach you use to manage your breakpoints and display conditions, and if you have a way to centralize this in one place to avoid having to modify every breakpoint on every page if you need to change a breakpoint based on another screen size.

Additionally, please don’t hesitate to let me know if you need me to elaborate on any particular point. I’m happy to provide more information and clarification as needed.

Thank you for your help in advance!

How about storing the breakpoints as option set with width in pixel as attribute and use that for the condition when you need it? Something like when page width > get an option > breakpoint > medium