Layout Width and Space
Websites often display content in multiple columns. Although there are few options to customise layout width and column space, spacing in your site in the right way is just as important as words you put on.
To edit your site layout and space, from Live Customizer, navigate to Builder Tools → Width & Space.
Your changes will directly affect container-max width and column space of Page Builder, Header Builder and Footer Builder.
Container: A containing element to wrap site contents. They are identified by the
.containerclass to provide a responsive fixed width container, which can be edited via Container Max Width.
Column: If you consider your site as a grid system, columns are where house your content and placed in inside containers. Width of a column partly depends on Container Max Width. Each column are separated by a gutter (column space). You can change spacing between columns via Column Space field.
With Container Max Width, you can only specify the container’s max-width for desktop (>= 769 pixels), tablet portrait (<= 768 and >= 513 pixels) and mobile portrait (<= 512 pixels) screen. However, if you set 1200px for the container max-width of desktop screen, in the case your visitor’s device screen size is 1100px then your website may not look nice since containers will span entire the width of the viewport. That’s why we added an option called Max-width Queries to deal with the problem.
First, you must specify the screen size on the top input field, after that click on Create button to create a query item for that screen size. Then, you are able to set container’s max-width for the screen size just created. For instance, in the above image, we set 95% for container width of devices having screen size <= 1200px ( and >= 769 ‘tablet screen’ by default).