Responsive best practices

Discover how to structure your project for seamless responsiveness. These insights will save you a ton of time.

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.

Group all your items together. The group's size matters as it's what will be centered on the page. Opt for the Aspect Fit setting and a middle position using the Size & Position Scale choices. 

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.