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 to 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 going to get cropped.
Solution
1. Change the Settings in the 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 centre 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
To reduce the excessive top and bottom padding, you may choose to span the image only half the page rather than 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 displaying many Buttons in one set on a page, Mobile users will have to scroll to access some of the buttons.
Solution
Resize and reduce the width of the button set by editing the page on desktop and check how this appears on mobile using your browser or mobile app.
Here is an alternative layout that translates better on a smaller screen and avoids mobile users having to scroll within the set:
Order of Components
Page components are recognised in an order by the system, which is left to right from top to bottom.
This is also the order in which components will be shown on smaller screens.
Here is an illustration that may help you plan your layout to optomise it to work besk on desktop and mobile for the content you are creating:
