Intro to Responsive Design in Bubble.io

Bubble's biggest asset - a great freedom to build your own design - is also its biggest flaw.

If you design your app without knowing the rules of responsive design in Bubble, you will end up with an app that is not responsive and you will spend a lot of time fixing those responsive design issues afterwards. 🤯

👀 In this video, I teach you the few simple rules to know to make sure you build a responsive app and how to check that it's responsive. ✅

Here is my Responsive Design Cheatsheet for Bubble:

➖ Page Settings:
   ▫️ Recommended width page size: 960px
   ▫️ Fixed width: No
   ▫️ Minimum width: 33%

➖ 2-column:
   ▫️ 2 groups of 480px each
   ▫️ Each group has a minimum width of 66%

➖ 3-column:
   ▫️ 3 groups of 320px each
   ▫️ Each group has a minimum width of 99%

➖ For all designs:
   ▫️ Add a 20px padding for content (text, image, etc.) inside the groups.


➖ Bonus tip: 📱Sometimes, if your mobile design needs to be very different from your desktop design, I recommend you to create a specific page just for mobile. In order for your app to display it on mobile devices, you need to go in your desktop's page Property Editor and to choose your mobile's page in the "Mobile version" dropdown.