Comment on page
Design Pages for Mobile
When designing Pages, you may want to use responsive web design principles to support different screen sizes with the same App. This is easily accomplished with Block Styling and Devices. The default Page Layouts that you can choose from when creating a page have built-in responsive styling applied to the cards. For an example of this, see the Responsive Page Layout Example.
To create a responsive card layout just like the default page layouts, follow the steps below:
- 1.Create a Page with the first, single-card layout.
- 2.Clone the Horizontal Stacked Layout, Vertical Stacked Layout, and Card until you have the layout that you desire. Please note that the order in the Page Layers will also be the order, from top to bottom, that items appear in mobile.
- 4.Switch to Mobile view with the middle Devices section of the command buttons.
- 5.Adjust the heights of the elements. Any styles added in Mobile mode will apply only when the device's screen width is smaller than a threshold. In this case, change the first Horizontal Stacked Layout's Min height to 200%.
Clone the Blocks until you get the desired layout.
Adjust the Flex Grow to change the ratio the Blocks take on the page.
Switch to Mobile View.
Adjust the heights of the elements.