{"id":49310,"date":"2022-04-05T10:24:28","date_gmt":"2022-04-05T14:24:28","guid":{"rendered":"https:\/\/www.boldgrid.com\/support\/?p=49310"},"modified":"2022-04-05T10:24:28","modified_gmt":"2022-04-05T14:24:28","slug":"working-with-container-types","status":"publish","type":"post","link":"https:\/\/www.boldgrid.com\/support\/boldgrid-crio-supertheme-product-guide\/working-with-container-types\/","title":{"rendered":"Working with Container Types"},"content":{"rendered":"\n

In web design, the container<\/b> 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>, a 3rd option for Max Full Width is also available. In this article we will explain the differences between these container types.<\/p>\n

Contained<\/h2>\n

In a Contained<\/strong> 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.<\/p>\n

\"Contained<\/a><\/p>\n

Full Width<\/h2>\n

In a Full Width<\/strong> 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.<\/p>\n

\"Full<\/a><\/p>\n

Max Full Width<\/h2>\n

The final option, Max Full Width<\/strong>, 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:<\/p>\n

\"Max<\/a><\/p>\n

Using Max Full Width Containers<\/h3>\n

To create content using Max Full Width containers, you will need Crio version 2.14 and Post and Page Builder<\/a> version 1.18 or higher. Without the Post and Page Builder, Crio cannot use Max Full Width containers.<\/p>\n

First you will need to enable the setting in the Customizer. You can find the Container setting in the Customizer in these locations:<\/p>\n