Responsive Best Practices

Find out how to structure your project so that it is easily responsive. These tips will help you save lots of time.

Adjust content automatically with Flexbox

The Flexbox component is a container that automatically adjusts its scroll size according to its content and arranges its objects on a main axis (horizontal or vertical) with the same spacing.

It is automatically adjusted ( Aspect Fit) which allows to manage the position of "child" objects without worrying about the responsive. We will always have 5 px between the elements, no matter how they change size. The size change is decided by the elements themselves.

Place your objects inside. Choose the margin between the elements and the orientation (vertical or horizontal). Flexbox also allows you to create a grid: simply check the Wrap property to the container so that elements can be arranged in several lines if necessary.

Put a background that adapts automatically

One of the tricks to simply create a responsive layout is to adapt the background to the size of the screen.

If the background is a shape, you can stretch it directly ( Stretch).

If your background is an image, you need to put it in Aspect Fill option to keep the image ratio and make sure that the image fills the screen perfectly, even if you have to go beyond it.

Concerning the image, it is necessary to maintain its proportion. Choose the cropped part of the image to make sure you have no space and the Aspect Fill.

Center objects on all screen sizes

If your background is responsive, you can center all your objects and keep your original layout.

Group all your objects together. The size of the group is important because it is the one that will be centered in the page. Choose the Aspect Fit option and a central position using the Size & Position Scale options. 

The content is grouped or as here placed in a container (Gallery). The Adjusted option is enabled.

Place optional "child" objects in Aspect Fit 

Still need help? Contact Us Contact Us