This is a video about Switching from Row to Column in Bubble.io. Bubble doesn't let us do this in conditionals, so adding a bit of CSS will accomplish this.
Here are the steps:
Flexible Repeating Group
Setup
Plugin:
Classify
Page:
Appearance:
Background style: Flat color
Background color: Background
Layout:
Container layout: Column
Width for UI builder: 1440
Min height: 960
Step 1
Add Group to page
Layout:
Container layout: Column
Horizontal Alignment: Center
Uncheck Make this element fixed-width
Min width: 10
Check Make this element fixed-height
Height: 100%
Padding: 40 all around
Conditional
When Current page width is smaller than 992
Left padding: 16
Right padding: 16
Step 2
Add Repeating Group
Appearance
Type of content: your data type
Data source: Do a Search for your data type
Set fixed number of rows: checked
Rows: 1
Set fixed number of columns: checked
Columns: 3
Separators
Style: solid
Width: 32
Color: doesn’t matter as long as it is 0%
ID - Follow Classify instructions - open curly bracket addClass: “repeatingGroup” close curly bracket
Layout
Cell’s container layout: Row
Horizontal alignment: center
Uncheck Make this element fixed-width
Min width: 280
Max width: 1360
Min height: 280
Fit height to content: checked
Step 3
Add HTML element to the top
Layout:
This element is visible on page load: unchecked
Collapse when hidden: checked
Appearance
Less than bracket style greater than bracket
Dot repeatingGroup open curly bracket
display: flex;
Close curly bracket
@medai screen and (max-widthL 991px) open curly bracket
Dot repeatingGroup open curly bracket
flex-direction: column;
Close curly bracket
Close curly bracket
Less than bracket /style greater than bracket
That's it. Let me know what questions you have.
7 окт 2024