Learn how objects adjust to other screen sizes, Size & Position Scale settings (position, resize, stretch...) and the importance of containers including the Flexbox component to structure your layout.
Your project is created based on a fixed layout ratio. If you want responsive design on all devices, activate the Size & Position Scale mode and define the responsive parameters of visual elements. Your design automatically adapts and provides an optimized user experience for each device.
Please note that responsive mode does not recognize the change of orientation of the device. If you have created a "portrait" mobile app and you want a "landscape" layout for the tablets, you need to create another layout: Adaptive design & layout management.
The importance of containers
Each object adapts itself on the screens according to its responsive properties, but also according to where it is located. Indeed, if it is inside a container, the object will adapt according to the properties of its container. It becomes the child of its parent, it is a principle of hierarchy.
That's why it is important to place your objects correctly.
What is a container?
Containers are "boxes" into which you can insert one or more objects. There are several containers among the PandaSuite components: the group, the scrolling area, the gallery, the multi-state, the drag & drop, the pop-up and Flexbox.
You can identify when an object is inside a container using the breadcrumb.
Containers allow you to structure your layout by creating multiple levels of processing for your objects. For example, you can place the header, paragraph and images inside a container. Each time you move the container, all the objects inside it move.
Size & Position Scale settings
Each object adapts its behaviour according to the size of the screen when it goes into responsive mode. You can change two parameters: position and size.
Position: the object moves according to the difference between the original size and the size of the device. Choose one or more directions.
Size: the object is resized horizontally and/or vertically. If the resizing involves both axes (horizontal and vertical), you can choose between 3 options:
- Stretch: the object stretches according to the new size of the project: it can be distorted.
- Aspect Fit: this option keeps the ratio of the object and its proportionality: it keeps the object in a limited area.
- Aspect Fill: this option keeps the ratio of the object and makes sure that the object fills the limited area and does not exceed the area.
You can set these options for your objects using the Size & Position Scale settings in the toolbar.
Learn more: Size & Position Scale
Default behaviour
Let's take a detailed look at the default behaviour of your objects. What happens when you enable the Size & Position Scale mode?
Images
Automatically, your images resize proportionally. They are in Aspect Fit option which allows them to keep their original ratio (as opposed to Stretch which would have distorted them). They try to fill the available space by keeping their proportion without overflowing.
On the other hand, they evolve freely in terms of Position.
Text
The size of your text behaves similarly to an image. It can even be distorted. Which is weird when it comes to text.
If you don't want proportionality, you need to activate the flow mode from the text Properties window so that the text can adapt.
Containers excluding Flexbox
By default, these containers resize proportionally and according to a Stretch behaviour. Objects inside will have to be correctly set to adopt the desired behaviour. The best way to start your responsive layout is to set them to Aspect Fit to maintain consistent behaviour (position and size) between child objects.
Be careful, the scrolling area does not allow you to adapt the size of the scrolling area to changes in its content. This is why you must use the Flexbox component directly.
Flexbox
Flexbox component is very interesting for responsive management:
- It adapts its scrolling according to its content and margins.
- It is organized in a stack, it "stacks" the objects, one after the other, unlike groups and other containers in which they can be placed freely.
By default, Flexbox has Aspect Fit behavior, which means that it keeps the container ratio and keeps the object within the limited area: objects inside will always keep the same spacing despite changes in size. It is an ideal component for your first steps in responsive design.
Learn more: Responsive good practices
Test responsive
In the Preview, resize your screens and view the behaviour on the main devices.
