The Divi Theme sidebar is quite narrow, and you may find yourself wanting to increase its width.

Changing the Sidebar Width in Divi

Recent versions of Divi include an option for setting the sidebar width. To set the sidebar width:

1. From your WordPress dashboard, go to "Divi > Theme Customizer > General Settings > Layout Settings" customizer section
2. Tick the "Use Custom Sidebar Width" box. The sidebar width option will now appear
3. Set the "Sidebar Width" option to your desired width (as a percentage of the content width, which is 1080px by default)
4. (Optional) Change the "Website Content Width" option (on the same customizer section) to adjust the combined width of the main content and sidebar
5. Publish the changes

Changing the Sidebar Width with CSS

Before Divi introduced the sidebar width option mentioned above, it was necessary to use CSS to change the width. Here is the CSS, in case it is useful to anyone. In this example, I'm setting the width to 300px, but you can replace it with your choice of width.

@media only screen and ( min-width: 1100px ) {

    .et_right_sidebar #sidebar .et_pb_widget { 
        margin-right:30px !important;
    }
	.et_left_sidebar #sidebar .et_pb_widget { 
        margin-left:30px !important;
    }
	
    .et_right_sidebar #left-area, 
    .et_left_sidebar #left-area { 
        width:720px !important; /* 1020 - width */
    }
    .et_right_sidebar #main-content .container:before { 
        right:300px !important; /* width */
    }
    .et_left_sidebar #main-content .container:before { 
        left:300px !important; /* width */
    }
    .et_right_sidebar #sidebar,
	.et_left_sidebar #sidebar { 
        width:300px !important; /* width */
    }
}

Other than replacing each instance of 300px with your desired width, you need to replace the 720px with 1020 minus your desired width.

This should set the sidebar (either right or left sidebar) to a width of 300px, on full screens. On smaller screens, the default Divi sidebar width is used.

Old Method

Below is an earlier, less effective method I came up with for setting the right sidebar width. I've kept it here for information, but you probably want to use the method above.

By playing around with the padding and margins, we are able to gain another 60px of usable space, while still getting something that looks good.

Here's the CSS. It's a work in progress and I hope to be able to come up with a way to get more control over the Divi sidebar width in the future:

@media only screen and ( min-width: 1100px ) {
    .et_right_sidebar #sidebar .et_pb_widget { 
        margin-right:30px 
    }
    .et_right_sidebar #main-content .container { 
        width:1140px; padding-left:60px; 
    }
    .et_right_sidebar #main-content .container:before { 
        right:285px; 
    }
    .et_right_sidebar #sidebar { 
        width:285px !important; 
        height:100%; 
        margin-top:-100px; 
        padding-top:100px; padding-bottom:10px; 
    }
}

Note that I've used a media query so that the sidebar is increased only on larger displays – mobiles, etc aren't affected by the changes.

The actual width of the sidebar is set in the last block by the "width:285px !important;" part. You will be able to decrease this to get a narrower sidebar width, but attempting to increase it further will cause the sidebar to jump to the end of the screen.