The Divi Theme sidebar is quite narrow, and you may find yourself wanting to increase its width. Unfortunately for us, things aren't as easy as just setting a new width on the sidebar element. But with a bit of CSS, it is possible to set any sidebar width we want.

Changing the Sidebar Width

Here is the CSS. 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.