Hi all,
I want to create two columns of repeating group on mobile, but more columns on desktop.
Is this possible with new responsive engine?
Mobile screen :
Desktop:
I wonder why minimum width of 0px doesn’t work here.
Bubble return me “one” column when screen is squeezed.
@nick.carroll Do we have to have two separate repeating groups in which show/hide conditions are set to achieve the UI above? I thinks this kind of List elements are very common. I hope bubble can handle this case easily. Thanks!
Hey Rio, you need to check within they appearance tab of your repeating group, the minimum size of a cell is defined there. You can also decide how many row/columns you want
Thank you, @benoit.devilliers
It is working on mobile. If I set the minimum cell size to 150px, I can indeed get two columns. However, if I keep this setting, I have a problem on desktop. Each cell tries to maintain 150px.
What I really want to achieve here is an “adaptive cell width” where the cells become smaller on mobile and wider on desktop. Is there any way to make the cells bigger as the viewport gets wider?
I need more cells on desktop. So this isn’t going to be my solution. I wish the elements in the Appearance tab also available on Conditional setting.
@rio You can uncheck the fixed number of rows/columns in appearance tab. Then remove the 100% max width in the layout tab. Leave it blank to be responsive enough to cover the whole space for desktop
Thanks @shu.teopengco 
It didn’t work like I desired. Cell’s size is not adaptive at all on desktop. But we are getting closer to the solution, I guess.
Mobile is fine:
These are my current settings.
Repeating group Appearance:
Repeating group Layout:
Content in the cell:
Did anybody find this feasible?
Hi @rio,
This is kind of my first time playing around with the new engine, so I’m no expert and there may be better ways but I believe I have achieved the result you want here - louisforum | Bubble Editor . I hope it helps
Hi @louisadekoya
Thank you so much for making this.
I checked yours on both desktop and mobile.
Yep, at first glance I thought it worked, but on mobile it didn’t.
Although the size of the cells are adaptive, number of columns stays the same.
I should have made this clear enough at the beginning, but this is what I want:
I really appreciate fellow bubblers trying this out. Thank you.
About your two points :
What you can do is to have a group around your tile and add a conditional based on screen width for example “when current page width > 360 px, max width = 160”. This is how you can have a different size for something on different device.
If in the appearance tab you didn’t set a fixed number of columns that should do it !
Strange @rio , it works for me on mobile as seen in the screenshot below.
What phone are you using, not that it should matter, but I’m curious.
Yes, I feel this could have been the best solution, if bubble allow us to use conditions to adjust the “min width of column” that is in the repeating group appearance tab. If not every solution so far will not be good enough to achieve what you really want.
Well, it’s not going to expand the cell even when the screen is wider as long as the “Minimum width of column” in the Appearance tab is targeted to mobile. In my case the “Minimum width of column” is 160px. Bubble somehow keeps this size all the time.
Hey @louisadekoya , look the cells they are not fully visible!
Yep, I want “MAX width of column” in the appearance tab. That way cell would target to maximum size whenever available.
Yeah, this is another way to make it achievable. 
I see what you mean now @rio . Here is a different page where it seems to work. I don’t totally get why it does yet but will dive deeper when I get a chance. At least it seems to work so it may help you.
Link: louisforum | Bubble Editor
Thanks for your time @louisadekoya !
You missed my second point.
The size of the circle stays the same.
I think I keep yours thou, thanks.
Yes @rio, I did miss that, or rather I thought you meant either one or the other. I don’t know enough yet to achieve both at the same time but …
Hopefully something in either of these will help you get to what you want or hopefully someone who has been playing with the new engine for longer than a couple of hours will chime in with the correct approach. I haven’t looked at any of the reference docs on this by the way or watched any tutorials so there may be an answer already out there. Let us know if you find out.
Very curious on the eventual solution for this. I am also trying to figure out how to have the “2 columns on mobile and 4 on desktop with adjusting column width” layout.
