Here’s a super quick fix for the Divi theme, particularly the blog feature. By default, the Divi theme includes a thin grey line in the blog post layout. This grey line divides the post content from the sidebar.

As a design element, the separator or dividing line is good as it helps to keep the two separate sections of the post layout apart, however, in some cases, can be distracting and may take away from a website’s look and feel. 

Personally, I really love clean and minimalistic designs, with little to no clutter. For me, the default separator or dividing line is not to my taste. 

For example, with the Viva Luna Studios website, I’ve chosen to create a transparent header. I like this aesthetic as the menu sort of blends to whatever background image or colour I chose for each page. Also, when it is transparent, the menu doesn’t look too much like a separate element. 

When I set my menu to be transparent, the dividing Divi sidebar line can be seen running straight through the menu, adding a bit of visual confusion to the mix.

Removing this grey sidebar line can only be done with code. Initially, I assumed this would be an easy fix, something that could quickly be turned on or off using a setting in the Divi Theme Options console, or possibly even using the Customizer, but this wasn’t the case. 

To remove the Divi sidebar dividing line, copy the code below and paste it into the stylesheet (style.css) of your website’s child theme.

/* Remove dividing sidebar line */

#main-content .container:before {
background: none;
}

Once the code is entered, save the stylesheet changes and return to your WordPress website. Refresh the page, and you’ll see that the Divi sidebar line is gone. 

If you don’t have a child theme for your Divi website, I highly suggest taking the time to find out more about it. Using a child theme in development is deemed as best practice, so do take the time to learn about it, especially if you plan on making extensive site edits. 

I hope you enjoyed this quick fix for the Divi theme.