Containers are an optional way to group elements and apply rules to multiple elements at once. For example, if you have a container with two buttons in it, you can easily change the number of columns and spacing for all buttons at once.
Containers are used in all screen library screens where there are multiples of the same element type.
Adding a container
Follow these steps to add a container to a screen:
Select the screen where you want to add the container.
Click Add Elements.
Click Container.
Adding elements to a container
Follow these steps to add elements inside a container:
Select the + icon located underneath the container.
Select the desired element type from the dropdown menu.
Repeat the process to add as many elements as needed.
Modifying container elements
Customize the layout of elements within a container.
Select the container in the editor. Its edit controls appear.
Adjust settings, such as:
Number of columns
Gap between elements within the container
You can also adjust the container width specifically for desktop view:
Switch to Desktop view.
Select the S, M, or L button to adjust the size. Using these presets allows you to change the desktop size without altering the mobile container size. When using this feature, you do not need to use Style Independently.
Frequently asked questions
What is the recommend image specs for mobile and desktop views?
Having a 2x2 setup on mobile, and a 4x1 setup on desktop is a very common design!
How do I set a different number of columns between mobile and desktop views?
First add all buttons/responses to your screen, before you turn on Style Independently and save. Then turn on Style Independently and adjust the number of columns on the mobile and desktop views.