Overview
When designing a page layout on a desktop this often does not translate well to a mobile view. Here are some common issues and how to create a mobile-first approach page design.
A large image is cropped.
If you have a large banner or image that spans across the entire page width, it is likely that it is going to get cropped.
Solution
1. Change Settings in Image Component.
Change the appearance of the Image Component to Fit while retaining the original proportion and make sure to check "Transparent background".
It allows the image not to be cropped on mobile and it will be displayed in the center area, the transparent background means it won't have a white box around the image allowing it to blend with the background.
2. Modify the Page Layout.
In order to reduce the excessive top and bottom padding, you may choose to span the image only half the page rather than to the entire page width.
Here is an alternative layout on both desktop & mobile by having the banner image only span across half the page.
Button Layout
When having a long list of Buttons, Mobile users have to scroll in order to access some of the buttons.
Solution
Reduce the width of the button and check the layout on mobile to avoid user scrolling, here is an alternative layout that translates better on a smaller screen.
Order of Components
Pages components will be ordered from Left to Right from Top to Bottom.
Here is an illustration that may help you plan your layout:
