Bubble.io popup to bottom sheet скачать в хорошем качестве

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