The row wrap seems to be working okay, but not on the smallest screen.
768
320
Somehow it will wrap one card, but not all three. I’ve played with the min and max width, padding, row gap, column gap, margins to no avail.
I can try a condition on each card like this:
But I can’t seem to make a condition on the parent container to change the layout to column on small screens.
Is there a solution for this?
Thank you!
In bubble you cannot change group or in traditional way DIV , layout , if they are set to colum , its childern will be stack as colum and if they are set to row, its childern will be stack as row:
what you can do , make the parent group row, and in his childern give a minimum with in Layout tab of small editoty like 320, this way if screen get smaller to 320 it will stack all its childern verticaly.
Yes, I have the minimum of 24% which should push them to stack vertically, but it only manages to do this with the 768 screen not with the 340 screen.
I tried your solution to change it to 320px but it made no difference.
dont do it on conditon , put it in layout seciton where it say minimum witdh
Yes, the layout section is where I tried it. Perhaps this is a bug. Thanks for your help.
My workaround is to create duplicate containers, one with row format and one with column and then show them on condition of the screen size.
the problem is the percentage, that way it will always suit will not break the lines, change to fixed px that will reseolver
You don’t need to use percentage in this case; set a minimum width in px and a maximum.
Since the phone’s width is smaller, that’s when you use the breakpoint condition, and then instead of the two groups on the same line, through the condition you set them to have 100% width; that way they fill the line completely, making the other group go below and fill its entire line.
Okay that works! Thank you!
