Customize Your Layout Widths

Total includes a powerful function so you can easily tweak the widths of your site (main/content/sidebar) for all responsive sizes. All you need to do is go to Appearance -> Customize -> Layout to tweak your layouts and view the changes live.

  • Container Width: Your site width (all content).
  • Content Width: The area with the content when your left or right sidebar is enabled.
  • Sidebar Width: Your sidebar width.
Important: The customizer has a sidebar with all the options so your actual site renders a bit smaller, therefore when altering your desktop sizes you may not notice the changes, but they are taking affect. So make sure if you are using a large monitor to open the window at full size or if not to save and preview the changes live.
Tip: Make sure that your “Content” width and your “Sidebar” width is not greater then your  “Main Container” width at any time because they won’t fit.

Container Width

This is the width of your site. You can use pixels or percentages for the value. There isn’t any max or minimum.

total-container-width

Content Width

The “content” area just like the name suggests is the area where you content is.

total-content-width

Sidebar Width

And the “sidebar” is your main sidebar.

total-sidebar-width

Max-Width

Since version 3.0.0 of Total the theme was changed to a fluid layout so there is a max with of 90% on the main container. This makes it so even if you set your layout to be 3000px wide it will never go past 90% of your window width so as you resize your browser your site content will always be visible. This can be altered at Appearance > Customize > Layout > General.

total-max-width