The Sidebar And The Nuclear Option...
Recently, a visitor stopped by with a question regarding the sidebar and the margins. In general, adjustments can be made to the content area, the sidebar area and the margins through the Widths menu by selecting Theme > Customize > Advanced > Widths. I've found it useful to let the Contempo template do most of the heavy lifting, but, since the template isn't ideally suited for really wide screens, there can be a lot of white space on really wide screens. So, for screens that exceed a certain width, I use a percentage for the maximum width rather than a fixed number. This allows the content area to use more of what would otherwise be empty space. The CSS snippet below overrides the fixed number defined in the Widths menu, but, only on screens wider than 1300 pixels:
The Nuclear Option
While we're on the subject of the sidebar, some people on the Blogger Help Forum have expressed an interest in not having a sidebar at all. If there is a need to go full nuclear and not show the sidebar, then, use the following CSS snippet.
If you do decide to hide the sidebar, be sure to move (drag and drop to another area such as the footer), remove or disable any widgets that display content in the sidebar by using the Layout menu.
In the CSS code above, any value from 70% to 100% should work reasonably well. To add a CSS snippet use: Theme > Customize > Advanced > Add CSS. Be sure to select Apply to Blog to save your changes.@media only screen and (min-width: 1300px) { .page_body .centered { max-width:70%; } }
The Nuclear Option
While we're on the subject of the sidebar, some people on the Blogger Help Forum have expressed an interest in not having a sidebar at all. If there is a need to go full nuclear and not show the sidebar, then, use the following CSS snippet.
If you do decide to hide the sidebar, be sure to move (drag and drop to another area such as the footer), remove or disable any widgets that display content in the sidebar by using the Layout menu.
.hamburger-menu {
display:none !important;
}
.sidebar-container {
display:none !important;
width: 0px !important;
max-width: 0px !important;
}
.sidebar-container .sidebar_bottom {
width: 0px !important;
max-width: 0px !important;
}
.page_body .centered {
max-width:100%;
}
.page_body {
margin-left:0px;
}
.sticky {
padding-left:0px;
}
body.collapsed-header .page_body .centered-top-container {
padding-left:0px;
}
Of course, it's also possible to simply gut the theme HTML and remove any traces of the offending sidebar, but, editing the theme HTML is not really my area of expertise, so, I'll leave that to the fine folks at the Blogger Help Forum or if Blogger is feeling a bit less than useful today, the fine folks at StackOverflow will be happy to help. Well, that's all the advice I have for today. Enjoy.