Working with Container Types

In web design, the container decides how much of the screen your content fills. In BoldGrid Crio, there are two main container types – Contained and Full Width. When using Crio with the Post and Page Builder, a 3rd option for Max Full Width is also available. In this article we will explain the differences between these container types.

Contained

In a Contained type of container, the content and backgrounds are restricted to the center of the page and white space will appear on either side. An example is shown below.

Full Width

In a Full Width container, the content and backgrounds will extend to fill the entire screen. If you are on an ultra-wide monitor, the design could become quite stretched. The screenshot below shows the same website full width.

Max Full Width

The final option, Max Full Width, bridges the gap between Contained and Full Width containers. It allows content to extend to a defined width while backgrounds will still stretch to the sides. This option can help designs stay intact on larger screens, like shown below:

Using Max Full Width Containers

To create content using Max Full Width containers, you will need Crio version 2.14 and Post and Page Builder version 1.18 or higher. Without the Post and Page Builder, Crio cannot use Max Full Width containers.

First you will need to enable the setting in the Customizer. You can find the Container setting in the Customizer in these locations:

• Design > Pages > Container
• Design > Blog > Blog Page > Post List Settings
• Design > Blog > Posts > Container
• Design > WooCommerce > Container (if installed)

Enter your desired container size in pixels or use the slider. Publish and close the Customizer.

Next, you will need to enable the Full Width Row Background where you want to use this container type. In the editor, click in your desired section. Use the yellow row popover menu and select Advanced Control, like shown below.

In the popover choose the Width panel and enable the Full Width Row Background:

Repeat for each row you want to use the Max Full Width container.

Max Full Width Headers & Footers

Page Titles, Customizer Header, and Customizer Footer layouts will use the Container Max Width value when set to Full Width. These controls are found here:

• Design > Site Content > Page Titles > Content Container
• Design > Header Design > Site Header Layout > Select Layout > Custom
• Design > Header Design > Sticky Header Layout > Select Layout > Custom
• Design > Footer > Layout

Custom Page Headers and Footers can take advantage of this feature as well, giving you more design freedom than ever before!