Dual Sidebars Full Width

By default, the right sidebar is shown on the Blog page. When a post is opened, the sidebar disappears. But there is also a left sidebar that can be added on a page-by-page basis in the editor as seen here:

dual sidebars

As you can see, there are a number of configurations to choose from, and on this page I have chosen to display both sidebars.

Each sidebar can contain its own set of widgets, which may be suitable for one or more pages of your site.

However, using dual sidebars greatly reduces the width of the centre text area. Of course, this is not a problem on mobile devices, because the two sidebars are pushed below the main text.

A way to overcome this is to use a Full Width setting for the Content Container via the editor:

sidebars full width

This makes the entire page expand to the screen size of the visitor’s monitor. We still need to use the Simple CSS plugin to adjust our margins and padding, as we did in the previous page, and I have highlighted the changed values in red. Notice I have also overridden the full width value and capped it to a maximum of 1920 pixels.

Sidebars Full Width

Here is the CSS code added to this page:

.full-width-content .container.grid-container {
max-width: 1920px;
}
.site-content .content-area {
width: 70%;
padding-left: 20px;
padding-right: 20px;
}
.separate-containers .site-main {
margin-left: 0;
margin-right: 0;
}
h1 {
margin-top: 20px;
}
.widget-area .widget {
padding-left: 40px;
padding-right: 40px;
}
table#wp-calendar.wp-calendar-table {
margin-bottom: 0;
}
table#wp-calendar.wp-calendar-table a {
font-weight: 700;
}