How to Remove the Divi Sidebar

On the default pages like the post, category, archive and 404 pages there is always a sidebar. In this tutorial I will be explaining how you can remove the sidebar globally but also on each individual page.

Let’s get started with removing the sidebar globally.

Remove sidebar globally

To remove the sidebar on all your pages you can use this CSS snippet.

The first snippet removes the thin vertical line.

The second snippet removes the sidebar

The third snippet makes your content 100% width (the sidebar has been removed so you can use all the space).

/* Remove sidebar */
#sidebar {
	display:none;
}

/* Remove thin line */
#main-content .container:before {
	background: none;
}

/* Make content 100% width */
@media (min-width: 981px){
#left-area {
	width: 100%;
	padding-right: 0px !important;
}}

Place this snippet in Divi > Theme Options > CSS or in your Divi child theme CSS style sheet.

Remove sidebar on post pages

To remove the sidebar only on your blog posts you can use the following CSS.

/* Remove sidebar */
.single #sidebar {
	display:none;
}

/* Remove thin line */
.single #main-content .container:before {
	background: none;
}

/* Make content 100% width */
@media (min-width: 981px){
.single #left-area {
	width: 100%;
	padding-right: 0px !important;
}}

Remove sidebar on category pages

To remove the sidebar only on your category posts you can use the following CSS.

/* Remove sidebar */
.category #sidebar {
	display:none;
}

/* Remove thin line */
.category #main-content .container:before {
	background: none;
}

/* Make content 100% width */
@media (min-width: 981px){
.category #left-area {
	width: 100%;
	padding-right: 0px !important;
}}

Remove sidebar on archive pages

To remove the sidebar only on your archive pages you can use the following CSS.

/* Remove sidebar */
.archive #sidebar {
	display:none;
}

/* Remove thin line */
.archive #main-content .container:before {
	background: none;
}

/* Make content 100% width */
@media (min-width: 981px){
.archive #left-area {
	width: 100%;
	padding-right: 0px !important;
}}

Remove sidebar on 404 page

To remove the sidebar only on your 404 page you can use the following CSS.

/* Remove sidebar */
.error404 #sidebar {
	display:none;
}

/* Remove thin line */
.error404 #main-content .container:before {
	background: none;
}

/* Make content 100% width */
@media (min-width: 981px){
.error404 #left-area {
	width: 100%;
	padding-right: 0px !important;
}}

And that is the end of this tutorial. I also have a tutorial how you can add any Divi module in the sidebar. Check that one out if you want to make a special sidebar.