Introduction to Responsive Web Design in Bubble

Responsive web design in Bubble has just received a huge boost and that's with the release of custom responsive breakpoints for easier design management. At least that's what Bubble is calling it and I'm going to demo it in this video and 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 on PlanetNoCode

And 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.

Demonstration of Custom Breakpoints in Bubble

But let me demo this to you here. So I've got a really simple header going on and it's just a row and then I've got a so that the row is container alignment space between and I've got some text links on the left on the right hand side. So the added features in here are that we can set our own breakpoints and we can customize and we can use them as like variables in our app.

How to Use Custom Breakpoints

So at the moment if I shrink down the size of my the width of my screen 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. So using the new custom breakpoint tools I can do that by saying collapse when hidden and then going when page width is equal to or less than and before I'd have to manually type in 320 and that would that number wouldn't stick or be relevant anywhere else in my app I'd have to manually remember that number and the only help that these were were quickly shuffling between the different set widths.

Customizing Mobile Width

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 and so now we'll see that it comes in and out of view. But what if 320 is not really a helpful mobile size because you know phones just seem to constantly 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 so we could instead say well let's say actually we want to go really old-school maybe like an iPhone 4s I don't know how wide that is but it's probably quite small and so we can change it and it gives us this warning that this change is going to be updated throughout our app and that in in some sense is referring to the number here watch if I click confirm I now get 420 there and 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 than you can reference it throughout your app and you can also create custom ones.

Adding Custom Breakpoints

So let's add in a custom one and we'll say I mean let's just say a really big screen like two nine seven zero okay and that's gonna be far bigger here but for some reason what if I wanted to hide them on a screen that is equal to or lot 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 and so now if I make it can't get into the space but if I make it smaller by clicking on the one of the presets it goes on down and it changes so 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 because it's just going to help link everything together and make things easier in the future for us.

Conclusion

So what do you make of this how about giving a good explanation do you think I've missed something please leave a comment down below