Agencies
Services
Container
Container is a component for grouping components together for the purpose of sizing them or providing a background behind the components in the container.
The most common uses for a Container component within a page are to add background color or image, and group components to resize them together.
Configuring the Properties tab
- Select the right layout. Select responsive grid if you want components within the container to adjust size. Select simple if you want components to just stack on top of one another.
Configuring the Desktop tab
- Drop in a background image if needed. Select the proper image placement.
- Configure the background color as needed. Transparent by default.
Configuring the Mobile tab
- Drop in a background image if needed. Select the proper image placement.
- Configure the background color as needed. Transparent by default.
Configuring the Styles
- Select a container style based on your needs. By default a Container will expand full-width to the edge of the Container it is in.
- Select max width if you want the container to be max 2000px wide.
- Select full-width padding if you want the container to expand full-width but with padding on both sides.
Examples
Full Width (Default) - Background Colors
Desktop background color - #005180
Mobile background color - #CC0000
Max Width - Background Colors
Desktop background color - #CC0000
Mobile background color - #005180
Full Width With Padding - Background Colors
Desktop background color - #005180
Mobile background color - #CC0000
Full Width (Default) - Image Placement + Background colors
Vaccination image + #005180 Background color
Max Width - Image Placement + Background colors
Vaccination image + #CC0000 Background color
Full Width With Padding - Image Placement + Background colors
Vaccination image + #005180 Background color
Full Width (Default) - Image Background Color Mix
Vaccination image only
Max Width - Image Background Color Mix
#005180 Background color
Full Width With Padding - Image Background Color Mix
Vaccination image only
Troubleshooting
Known Issues, Quirks, & Tips
- When resizing Containers, ensure to use the blue handle on the right side of the component. When adjusting the positioning of a container on it's current row, then use the left side blue dot/handle when resizing the component.
- Left-hand Navigation pages get 9 default columns for a container. If the user puts another fullsize container within that container, and the parent container hasn't had it's width adjusted (IE: it is freshly-inserted), you can resize the child container to 12 columns. Users sometimes run into issues where 1 page has a nested container on one side but not another, causing alignment issues with child components.