Home Page

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 ToolsWidth & Space.


Layout

Edit your site’s layout width and space via Live Customizer


Your changes will directly affect container-max width and column space of Page Builder, Header Builder and Footer Builder.

Container Max Width & Column Space


Layout

Visual Presentation of Width & Space


Max-width Queries




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.


Media Queries


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).