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.

 

flexbox_properties.gif

 

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.

responsive_background.gif

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. 

 

gallery_Aspect_Fit.png

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

 

child_object_aspect_fit.png

Place optional "child" objects in Aspect Fit 

 

center_objects.gif

Was this article helpful?
1 out of 1 found this helpful

Create apps and interactive experiences without any coding

Easy-to-use ∗ Free ∗ No installation

Sign up free