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.
Add a container
Select the screen where you want to add the container.
Click Add Elements > Container.
Add elements to a container
Select the + icon underneath the container.
Select the desired element type from the dropdown menu.
Repeat the process to add as many elements as you need.
Modify container elements
Select the container and its edit controls appear in the editor window.
Adjust the settings as desired.
Number of columns
Gap between elements within the container
Desktop Size
In Desktop view, you can adjust your container width using the Small, Medium, or Large presets. Using this form of adjustments lets you change the size of a desktop container without changing the size of the mobile container. When using this feature, you do not need to use Style Independently.
To adjust the desktop container size:
Switch to Desktop view.
Select the S, M, or L button to adjust size.
FAQ
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.