Responsive web design & custom breakpoints

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.