Hi, I’ve been searching this forum but I couldn’t find what I was looking for. However, I apologise in advance if it has previously been covered.
I’m currently trying to make my repeating group (3 columns, 2 lines, vertical ext. scrolling) repsonsive. Unfortunately whenever the page is squeezed, some of my cells disappear. I was wondering if there was a way to make them go below one another, and, if at all possible, centered.
There is quite a few discussions on the forum on this matter. I think everyone hopes against hope there is a solution. The answer I’m afraid is no there is no way to do it. This sounds awful but what you have to do is to create multiple RGs with different numbers of columns (one for each page width you want to cater for) and then use conditionals and responsive settings to determine which one is shown.
For example, you might create a 320/350 version for mobile, a 600 for tablets, a 1,200 for others. You might decide to make the wide one visible by default and make the other two not visible. Then you would go to responsive settings and set a Hiding Rule for the wide one that it does not show if page width is < that XXX. And have a conditional on the mid-size to say when wide is not visible this one is and put a hiding rule on it and then the narrow one has a conditional if wide and mid-size are not visible this on is.
Or you can install the free CSS Tools plugin. It allows you to reference page width so you simply put that into the conditionals.
Messy, duplication of effort and code … but right now that’s how it is.
Wow, yeah that sounds quite tedious. For now I’ll stick with the answer someone previously suggested (but which has now been deleted). Once I know Bubble a bit better, I might check this out. Thank you very much in the meantime, any help is greatly appreciated
A good place to experiment with is Cell minimum width, defined on the repeating group itself. I suggest experimenting with that in order to see if you can get the desired effect. Just keep mind mind the responsive constraints you put on the card group itself as well.
Otherwise, creating multiple versions of the repeating group based on breakpoints, as suggested by @patricia, is also a good approach.
P.S. really nice design work! For legibility, one thing I also recommend for when you have text on top of an image is to contain the text/elements with a group and then apply a gradient/fade to the group with transparency. Here’s a video on how to set it up.
I found a workaround for this. If you use a “full list” instead of any other types, it will act like CSS flexbox with wrap elements.
However if you have many items and only want to display a certain number, in your data source you can add “:items until #3” filter to show the first 3 for example.
