Let's start with what is Bubble?

Bubble: The best way to build web apps without code

It's a no-code tool that lets you build SaaS platforms, marketplaces and CRMs without coders help.

Bubble has a reputation for being unfriendly for responsive design.

But it's fairly simple to make responsive design using Bubble. If you  follow these 14 steps shared by Kieran from his experience using Bubble on his Twitter:

Step 1: Set your page width.

Bubble defaults to 960 width, but you can change this to whatever you want. This number will be important later on, so you'll probably want to make it the same on every page. He chooses 1200 in this example.

Step 2: Show the grid.

In the Grids & Borders dropdown, select Show Grid. Change the steps to something like 20 or 25. Select: "Snap to edges and grid". Select: "Show distance on hover". These will all be helpful for lining things up, which is very important in Bubble.

Step 3: Make sure your page isn't set to fixed width.

Sometimes this is set to fixed width by default. Make sure the checkbox is unchecked, otherwise your page will never be responsive.

Step 4: Use a group to make a container on the page.

Groups give you control over how the elements within them behave. Set up a group on the page and drag it to either edge so it's the full width. You may want to set its max width % so it doesn't stretch in larger browsers.

Step 5: Put a group within your container group.

You can nest groups within groups. This is how Bubble does margins and padding. His page is 1200 wide so he made the group 560 width so he can have two and still have some space between them. (The colours are to make it visible)

Step 6: Copy and paste that group.

Use the grid to space the groups evenly across the space. Use the "hover to show distance" to check you have the same number of pixels gap on each side. This helps Bubble to behave predictably.

Step 7: Set the minimum width of each group.

This determines the "break point", i.e. the width at which the second group will drop below the first. If it's too low (e.g. 20%) then the groups will just get narrower but never drop below.

Step 8: Check the groups break as expected.

He set 70% min width for each group, so when they get to that width the second drops below the first.

Step 9: Copy and paste the container below and make some more inner groups.

He wanted three across. Dividing 1200 by 3 and allowing for some spacing, he made these each 360 wide. Right click to get helpful options. He used "align vertical centres" and "distribute horizontally".

Step 10: Check it's responsive.

Great success! All is as it should be. Note: The horrible colours are to make it easy to demonstrate. Groups can have coloured/gradient backgrounds, borders, shadows or be completely transparent.

Step 11: Add content within the groups.

Drag elements on to the page and into the groups. If you see a red border on a group while dragging, it means the object is inside it. Sometimes objects look like they're in a group but they're not. Make sure everything lines up vertically.

Step 12: Use the auto-alignment options.

No need to guess. Use "center horizontally" and "center vertically" when needed to make sure the distances on either side of an object are even. This helps them to behave when the page changes size.

Step 13: Check responsive works again.

He removed most of the colours from the groups, but they're still there, working their magic. It probably needs a few more tweaks, especially with the way the image responds, but overall it's not a bad start.

Step 14: And don't forget mobile pages!

If you want your page to look massively different on mobile, you can set a different page as the mobile version. Users will be redirected automatically. Don't forget you can also hide/show elements conditionally depending on screen width.

For more knowledge on this subject, Kieran highly recommends the @100daysnocode by Max Haining AMA session with @_gregoryjohn

Summary

  • Wireframe your layouts before putting content on the page using groups
  • Line everything up with things above and below
  • Have even spacing on either side of everything
  • Set your min and max widths
  • Use the auto-alignment tools

Checkout our live meetups with the smartest NoCode builders here