Bubble.io Native Dynamic Card

Описание: Switch from column to row to column based on viewport size, all with Bubble.io settings. No CSS.

Resources:
https://viewports.fyi/

Directions:
Step 1
In repeating group or regular group add a group
Appearance:
Type of content: Your data type
Data source: Current cell’s data type
Background style: Flat color
Color: #ffffff
Roundness: 24
Layout:
Container layout: Row
Make this element fixed-width: checked
Width: 100%
Make this element fixed-height: checked
Height: 100%

Step 2
Add your image
Appearance
Dynamic image: Parent group’s data type’s image
Run-mode rendering: Rescale
ALT tag: Parent group’s data type’s alt description
Define each border independently: checked
Top-left: 24
Top-right: 24
Layout
Make this element fixed-width: unchecked
Min width: 287
Min height: 280
Conditional
When Current page width is less than 690
Min width: 100%
When Group Card’s width is greater than or equal to 658 and Group Card’s width is less than or equal to 959
Border roundness bottom-left: 24
Border roundness top-right: 0

Step 3a
Add Group for Card Content
Appearance:
Type of content: data type
Data source: Parent group’s data type
Layout:
Container layout: Column
Container alignment: Center
Apply gap spacing between elements: checked
Row gap: 32
Vertical alignment: center
Make this element fixed-width: unchecked
Min width: 287
Min height: 10
Padding: 24 all around
Conditional:
When Current page width is less than 690
Min width: 100%

Step 3b
Add your card contents. In this case, I added a Group
Layout:
Column
Set Row gap to 8
Make this element fixed-width: unchecked
Within the Group
Add Text for Title
Add Text for Description
Add Button

It will work as long as the card is within the Repeating Group that we set up in the last video.

Thank you!
https://www.mikreative.com