Responsive best practices
Discover how to structure your project for seamless responsiveness. These insights will save you a ton of time.
We recommend checking out the Responsive design article first.
Automatically Adjust Content with Flexbox
The Flexbox component is a container that auto-adjusts its scroll size based on its content, aligning items evenly along a primary axis (horizontal or vertical).
It auto-adjusts (Aspect Fit), letting you position "child" items without fretting over responsiveness. There will always be a 5 px gap between items, regardless of their size adjustments. The items dictate their own size changes.
Position your items within. Pick the gap between items and the direction (vertical or horizontal). Flexbox even lets you form a grid: just activate the Wrap feature on the container, allowing items to line up across multiple rows if needed.
Use an Adaptable Background
A simple trick for a responsive layout is to fit the background to the screen's dimensions.
If the backdrop is a shape, stretch it directly (Stretch).
For image backgrounds, set them to the Aspect Fill setting to maintain the image's proportions, ensuring it covers the screen flawlessly, even if it extends beyond its borders.
For images, it's crucial to keep their proportions. Select the image's cropped section to ensure there's no empty space and use Aspect Fill.
Center Items on Every Screen Size
With a responsive background, you can center all your items and retain your initial layout.
Content is either grouped or, as shown here, placed in a container (Gallery). The Adjusted setting is activated.
Optionally position "child" items in Aspect Fit.