May 07, 2018

Design Lab Tip: Hide Sidebars

If you are creating a special page or a landing page, you may want to hide the sidebars to avoid the clutter on the page and focus on the main content.

Code can be added to the HTML of the individual Page to hide the sidebars. This particular article is explaining how to hide the sidebars when you are using a custom design created with the Design Lab. If you are not using a responsive theme, please see the Landing Page article section on hiding sidebars.

First, create a New Page and add the content for the page. Then, click to the HTML tag to add the code. You will choose the code from below based on the number of columns in your design.

Design Lab Theme with Two Columns

<style>
/* hide sidebar in two-column layout */
#sidebar1 {
display: none;
}

/* increase width of remaining column */
.col-sm-8 {
width: 100%;
left: 0;
}
</style>

Design Lab Theme with Three Columns

<style>
/* hide sidebars in three-column layout */
#sidebar1,
#sidebar2 {
display: none;
}

/* increase width of remaining column */
.col-sm-8 {
width: 100%;
left: 0;
}
</style>

Hide Sidebars

Paste the code at the top of your Page and click Publish or Save. Please note you will not be able to switch back to the Rich Text tab after adding the code. To see your Page before publication, use the Preview feature.

Updated 07 May 2018

Not quite what you are looking for? Check out these other articles:

Search


Need design help?

Looking to launch a new blog? Have an itch to tweak your design or layout? Want a superior banner or design custom made specifically for your blog? We've got you covered!

Discover Typepad Services