I’m trying to create a dashboard for my app and trying to make use space effectively both on desktop and mobile: https://bubble.io/page?type=page&name=index&id=cards-responsive&tab=tabs-1
The arrangement gets very messed up as you re-size the page. Is there anything I can do (group certain cards together etc.) to make it a better responsive design?
If not, can anyone suggest another effective way to layout this information in a good responsive design?
Yes you can definitely control this - have you looked at the responsiveness tutorial? Definitely look at it.
Use the responsive viewer to see where things move and at that point try to regroup or change the parameters to fixed width or the % minimum width as well. Especially for the groups holding your groups and the page settings.
To get it right also requires lots of playing around with it - grouping your cards together will help - try grouping that first row as one group, but it takes experimentation to see what works best in your case.
I’ve found this is one of the hardest things actually but with persistence you can get it to work.
An important point, which isn’t documented properly, is that Bubble automatically (and silently) assumes that elements with roughly the same vertical offset are on the same “line” and tries to wrap them as the page width goes down.
What I see as of 2200 17 Feb are two lines of boxes. The first line has three boxes (equally spaced) and the second line has one box (on the left).
When the page width goes down the first line (of three boxes) starts to wrap so the right-most box (my trips) moves down below the two left-most boxes. Then the two boxes adjust to take up equal space on the line and the box that moved down to a new line does the same thing, putting it in the middle of the line it just created for itself.
If you click on group “my trips” in the responsive tab so that it turns orange you’ll see a set of justification boxes (left, center, right). If you select each one you’ll see the “my trips” box jump to the left, center, and right of the line it’s on.
Responsive logic is tough. You might have to totally swap out a “narrow” UI and a “wide” UI based on page width.
Thanks - I ended up doing a design with the same number of cards per row. That seems to work well.
