We’re excited to release the ability for you to create your own custom responsive breakpoints for your app!
If you followed along at BubbleCon, you know our team is focused on helping you build more modularly to make your apps scale more efficiently. We recognize the challenges you face when designing for multiple screen sizes on Bubble. It can be tedious to set up conditionals to ensure groups of elements on the page behave exactly the way you want them to. This update brings modularity to the forefront, simplifying the creation of custom breakpoints for your app.
Under the Design tab Responsive, you’ll see the default preset breakpoint at the top of your page’s editor now has the option to add more. You can now:
Add and name your own custom breakpoints
Choose from Bubble’s existing presets for mobile, tablet, and desktop
Modify the pixel value for your default layout
Edit or delete your custom breakpoints
For everyone who’s had to manually copy and paste conditionals with a pixel value on all their elements and groups, you can now replace the pixel value with the name of the breakpoint you set. These breakpoints are variables like style and color variables. Changes made to your breakpoint variable’s value will now automatically apply to all conditionals that use that variable.
FAQs:
Will deleting a breakpoint delete all the conditionals associated with that breakpoint?
The conditionals will still exist, but the deleted breakpoint will be replaced by a “missing breakpoint” error.
How many custom breakpoints can I create?
There’s no maximum. However, it’s best practice to only manage breakpoints for your user’s most common device types. We recommend no more than 5–6 breakpoints.
Do I still have to create conditionals for every page at each breakpoint?
Currently, yes, but this is our first step toward our future state of a single-tab responsive experience.
More documentation can be found in our manual. We’d love your feedback on this feature in the comments! Our goal is to provide you with tools that not only save time but also enhance the flexibility and performance of your applications.
Any expectations to allow us to set breakpoints on element width other than just the page width? In my apps I often need to use breakpoints based on the width of a parent container element and not the page width. Is it possible to create a breakpoint based on a group element, or is this just restricted to page width?
However, I look forward to this future where Responsive Engine works across the whole app instead of per page basis where we could set up responsive behavior faster.
Reverse the order of the breakpoints. The larger breakpoints should be to the right of the screen.
I don’t know if it was me, but in the past, I could click anywhere along the grey rule to instantly change to that width or to drag the width. Now, I must place my cursor all the way to the end to drag the width. This becomes pretty irritating UX wise and I hope you can revert the change.
Eager to try it out! Quick question though…
