Shrink everything?

I have two columns of content. When I shrink the width everything starts to go crazy. I want the format to stay exactly the same when the screen gets smaller, no snapping or anything. How do I make this happen?

Use a different builder. Use Bubble as back end.

Alternatively, spend 6-12months learning Bubbles outdated responsive engine, and then when you have exhausted yourself with hiding groups, showing groups, using phantom spacer groups, finding out simple stuff like positions based on % is not supported, collapsing groups in width is only possible based on page width. Learning that anything with repeating groups is a nightmare and should be avoided like the plague. Building your app 3-4times over for various resolutions… and never ending more hair pulling from trying to do responsive apps in bubble.

But good news everyone, Bubble has confirmed they are working on an updated responsive engine, when where and how is still unknown.

I started a small side app this weekend, just a quick weekend build. I’m able to build a fully fledged backend, front end, and all the logic in 1-2days. (This is where bubble shines).
Making it perfectly responsive will take another 2 weeks. Every single app I have built, responsiveness will eat up 60-70% of your dev time. For this little side project, it’s just not worth it and I’m building it to tablet size and up. And for phones I will just go with building a duplicate mobile version when I get around to it.

#jaded. #2020finallygotme

1 Like

I see…

It really depends on what’s in your columns: text, images, or text+images. A partial solution is to use conditional formatting based on current page width to reduce (or increase) font size when the page width increases (or decreases). Likewise, you can also use hiding rules to hide certain elements when the page width reduces.

To diagnose responsive issues, you can also use Google Chrome’s dev console (F12) responsive viewer, and drag the widths to see at what width do things start going crazy. You can also use the debug mode to see responsive boxes in the development version, and again use F12 to set different screen sizes.

One thing to bear in mind is that there are certain limitations arising from geometry (and that have nothing to do with Bubble) and aspect ratio. It is geometrically impossible for the format to stay exactly the same if you transition from web (width > height) to mobile (width < height), because the aspect ratio changes (except if you only have images). It is certainly possible to generate an illusion by changing font sizes responsive to the width.

1 Like

If you’re just getting started with responsiveness, here’s an old webflow video that
explains the basics in a good way. https://www.youtube.com/watch?v=bW2FZOtEOqQ

It’s 100 times more painful to do in bubble than Webflow in my opinion. What @deadpoetnsp
refer to (and me, in more grumpy terms) when talking about hiding rules are breakpoints. In bubble you often end up having to build out groups in 1,2,3,4 different ways and display a different group for each break point. As our friend the dead poet pointed out, you also have some styling options to use with your break points.

The time consuming part comes from not being able to use the same elements (as opposed to the webflow video). A telling example would be repeating groups.

Scenario, you want to display a centered RG that maintains a relative distance between cells in various resolutions when the number of cells change. This is not possible in Bubble, unless you use multiple RGs and set up hiding rules for when to show each RG. If RG contains 2 cells, display RG X. If RG contains 3 cells, display RG Y. If RG contains 4 cells, display RG Z.

Everything in bubble is rendered left > right. So if you want your right side group to be displayed above the left side group at a certain breakpoint. You can’t. Instead you would have to build a second version of your left side group, hide the first one and display the second one when a break point is met.

Groups don’t have responsive height scaling, I believe only images do. I.e. if the page shrinks in width, the group can be made to shrink in width as well, but not in width and height. You can sort of get around this sometimes by adding a “phantom” group inside the group, set it to collapse when hidden, and show/hide it for a break point.

The list goes on, but to sum it up. Working out all the intricacies of bubbles responsive engine takes months of trial and error, forum hunting and banging your keyboard. Setting up all your hiding and styling rules, adding empty groups, spacers etc. bloats your project and makes it more difficult to work with, and takes a disproportionate amount of time.

1 Like

What do you mean with “different builder” could you give some examples and how do you integrate them to your bubble backend? Please

1 Like

Sure,

If you’re looking at creating a mobile app, you could for example use Appgyver for the front end, it’s a free react native builder for creating native apps. It’s still in development but is already showing great promise. www.appgyver.com

and to connect it with bubble.
https://seanhoots22.gitbook.io/tutorials/appgyver-3rd-party-authentication-with-bubble/setup-bubble-backend

For web. I would suggest using webflow, you have to pay so it does add cost but for user facing websites I haven’t found another builder that makes it faster and easier to build great looking, fully, responsive sites. You could build your landing page outside bubble and still have the app part on bubble. Or use something like https://www.cloudcanal.io to connect you bubble back end. I haven’t used it myself, but it was built by a forum member a while back.

1 Like

Great info, thanks!