Bubble.io popup to bottom sheet

Описание: In Bubble you can modify the popup to become a bottom sheet when users view your app on mobile. With a small amount of CSS you can make this happen. Instructions are below.

Here is a step-by-step checklist you can duplicate into your Notion account.
https://mikreative.notion.site/Bubble...

Bottom Sheet from Popup

Step 1
Add popup to page
On the Appearance tab of the element settings, add
{addClass: "popover"} to the ID Attribute
Check Define each border independently, set roundness to 16
On the Layout tab
Container layout: Column
Row gap: 32
Uncheck Make this element fixed-width
Man width: 320
Max width: 480
After adding content the Min height can be 10
Padding: 32 all around
On the Conditional tab
When Current page width is less than or equal to 768
Max width: inf
Bottom padding: 48
Left, Right, and Top padding: 24
Border roundness bottom-right, and Border roundness bottom-left change to 0

Step 2
Open the style guide in your HTML element or add HTML element to the page
Add: (if you don't have style tags already, then add the style tags with the below in between. Youtube doesn't allow angle brackets. If you google HTML tags you'll be able to see what they actually look like)
less than angle bracket style greater than angle bracket
@media (max-width: 768px) {

.popover {
top: auto !important;
bottom: 0px !important;
width: calc(100% - 0px) !important;
}
}
less than angle bracket /style greater than angle bracket

Step 3
add a trigger to the page, such as a button.
edit workflow : element actions : toggle or show the popoup

That’s it!

Let me know what questions you have.

Resources:
Bubble - https://www.bubble.com
Me - https://www.mikreative.com