Remove vertical dividing line on Divi sidebar

By default, the sidebar on your blog and post pages have a 1-pixel light grey vertical seperator line dividing the sidebar on the right and your main content on the left.

This Divi dividing line looks clean and works well to subtly separate the two areas of content on your page.

There may be situations, however, that you will want to remove this Divi dividing line altogether or just edit how it looks.

To remove or edit this dividing line you will need to add some custom CSS targeting the divider into your Theme Options or into your child theme. You can learn more about adding CSS in Divi in our blog post that covers the places that are best to add your CSS and a couple of places not to add it.

To remove the dividing line from the standard sidebar in Divi you will need to target the CSS class #main-content .container:before,

Remove the dividing line from the Divi sidebar on blog and post pages

To remove the dividing line altogether you can add the following CSS into your Divi Theme options custom CSS box or into your child themes style.css stylesheet;

#main-content .container:before {
width: 0;
}

Edit the dividing line from Divi sidebar on blog and post pages

If you want to keep the dividing line but change the way it looks, you can use the same CSS class but use it to add the CSS edits you require. For example, if you wanted to make the dividing line red and 3 pixels wide you could add the following CSS;

#main-content .container:before {
width: 3px !important;
background-color: #ff0000 !important;
}

Remove the dividing line from the Divi Sidebar module

The Divi Sidebar Module can be added to any page on your website and the Divi Theme Builder allows you to create templates for every page of your website which may also include the Sidebar Module.

By default, the Sidebar Module also comes with a 1-pixel light grey vertical line on the right-hand side of the module. Just like any Divi module you can style it using the built-in module settings. So, when using the Sidebar module there is no need to use any CSS to remove the dividing line.

• Go to the Sidebar Design tab and scroll down to the border styles
• Remove the right-hand side default divider by selecting the right border icon and setting the right border width to 0px
• Add a left-hand-side divider by selecting the left border icon and setting the left border width to 1px
• Change the color as needed

Wrapping up

Personally, I always leave the dividing line on my blog page and posts but there are occasions when I use a sidebar within a website to add site or section-wide content. For this, I will just use the built-in options in the Sidebar module and very rarely use the CSS. It’s always good to know how to do it if you need to.

Do you keep your dividing lines or trash them?