Responsive web design & custom breakpoints
In this Bubble.io tutorial we demonstrate a new feature (November 2023) that provides a huge boost to responsive web design in Bubble.io
Custom breakpoints: Unlock responsive design magic in Bubble! Learn how to create seamless responsive layouts for any screen size.
Responsive web design made easy: Master Bubble's new feature for effortless responsive design across desktop, tablet, and mobile.
Say goodbye to manual breakpoints: Discover how Bubble's custom breakpoints revolutionize your app's responsiveness and design workflow.
Responsive Web Design in Bubble
Responsive web design in Bubble has just received a huge boost with the release of custom responsive breakpoints for easier design management. That's what Bubble is calling it, and I'm going to demo it in this video. It's going to be really quick, but this is an essential part if you are having to do anything with responsive web design. What do I mean by that? I mean does your app have to look beautiful on desktop, tablet, mobile, all different screen sizes? That's responsive web design.
Learning Bubble at Planet No Code
If you're learning Bubble, there's no better place to do that than planetnocode.com where you can access hundreds of our Bubble tutorial videos just like this one. We're in the business of helping accelerate scrappy solopreneurs' Bubble app development, and so you can find all of that on our website.
Demonstrating Custom Breakpoints
Let me demo this to you here. I've got a really simple header going on, and it's just a row. Then I've got some text links on the left and on the right-hand side. The row is container alignment space between. The added features in here are that we can set our own breakpoints and we can customize and use them as variables in our app.
Using Custom Breakpoints
At the moment, if I shrink down the size of my screen width, it gets kind of all cramped in the middle here. So I might want to do something like say when we get to this size, I want to hide this group. Using the new breakpoint custom breakpoint tools, I can do that by saying collapse when hidden and then going when page width is equal to or less than.
Before, I'd have to manually type in 320, and that number wouldn't stick or be relevant anywhere else in my app. I'd have to manually remember that number. The only help these were were quickly shuffling between the different set widths. But we now have so much more control because I can scroll down and find it and I can select the mobile width here and say element is not visible.
Customizing Breakpoints
Now we'll see that it comes in and out of view. But what if 320 is not really a helpful mobile size because phones just seem to constantly be getting bigger? What is considered mobile will change over time, and maybe 320 is not a suitable number for you. So we can just change it.
We could instead say, well, let's actually go really old-school, maybe like an iPhone 4s. I don't know how wide that is, but it's probably quite small. So we can change it, and it gives us this warning that this change is going to be updated throughout our app. That in some sense is referring to the number here. Watch if I click confirm, I now get 420 there.
Creating Custom Breakpoints
So I can drag it down, and it's not perfect for this demonstration, but what I'm getting at is that you can now use these to be referenced when you do a page width is greater than or equal to. You can reference it throughout your app and you can also create custom ones.
Let's add in a custom one, and we'll say, I mean, let's just say a really big screen like 2970. Okay, and that's going to be far bigger here, but for some reason, what if I wanted to hide them on a screen that is equal to or larger than this new massive monitor that I've selected here? Well, I can once more go in and I can find my custom one and it's hidden.
Implementing Custom Breakpoints in Your App
So now if I make it smaller by clicking on one of the presets, it goes on down and it changes. This will be something which you should be incorporating into your Bubble app design now because it's going to make it so much easier going forward. Basically, every page you build, any time you go to make something responsive, we should be referring to the breakpoints that we've got up here or the ones that we create instead of just typing in the number. It's just going to help link everything together and make things easier in the future for us.
Conclusion
What do you make of this? Have I given a good explanation? Do you think I've missed something? Please leave a comment down below.
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
Flexible Pricing Plans to Fit Your No-Code Journey
Choose the plan that aligns with your goals and start building your startup today.
Have questions?
We have answers!
Find answers to common questions about our membership plans, programs, and more.
Both plans offer full access to our learning resources, community, and support. The Annual plan provides a significant discount (over 15%) compared to paying monthly, and it allows you to lock in your rate for a full year.
Absolutely! You can easily upgrade or downgrade your membership plan at any time by logging into your account and selecting the desired plan. Any unused portion of your current plan will be prorated and applied to your new plan.
As a Planet No Code member, you'll receive a discount on our Bubble coaching sessions. Monthly members receive a 10% discount, while Annual members receive a 17.5% discount. To redeem your discount, simply log into your account and book a coaching session through our platform.
Our 8-week intensive mentorship program is designed to provide personalized guidance and support to help you accelerate your startup journey. You'll be matched with a startup expert who will work with you one-on-one to set goals, overcome challenges, and make rapid progress.
To apply for the Mastery Program, simply click the "Request Invitation" button on our pricing page and fill out the application form. Our team will review your application and schedule a call with you to discuss your goals and determine if the program is a good fit for your needs.
We accept all major credit cards, including Visa, Mastercard, American Express, and Discover.
While we don't offer a free trial, we do provide a 14-day money-back guarantee. If you're not completely satisfied with your membership within the first 14 days, simply contact our support team, and we'll issue a full refund.
If you decide that Planet No Code isn't the right fit for you, you can cancel your membership at any time by logging into your account and navigating to the subscription management page. Click the "Cancel Membership" button, and your membership will be terminated at the end of your current billing cycle.