How to resize the WordPress Customizer

I tend to write quite a lot of CSS to customize my websites. That’s why I almost always use an external text editor. A dedicated text editor or IDE (Integrated Development Environment) also gives you more control and helps writing CSS faster. The Customizer is no that bad for writing CSS, though, and if the amount of CSS you write is not enormous you could actually get away with it. Thing is, I’ve always found the WordPress Customizer’s width, quite narrow when editing CSS. There are two ways to solve this.

Method 1: Custom code

Add the following PHP code to your functions.php or use a functionality plugin. I would suggest using a child theme for this purpose.

add_action( 'admin_enqueue_scripts', 'the_dramatist_admin_styles' );
function the_dramatist_admin_styles() {
    wp_enqueue_style( 'admin-css-override', get_stylesheet_directory_uri() . '/admin.css', false );
} 

Then create a CSS file called admin.css inside your child theme directory and add the following:

.wp-full-overlay.expanded {
    margin-left: 500px;
}
#customize-controls.wp-full-overlay-sidebar {
    width: 500px;
}

Adjust the width value according to your liking.

Method 2: Using a plugin

Install and activate the Admin CSS MU plugin, then go to Appearance -> Admin CSS MU and write the previous CSS code in the Admin CSS text area at the top. Then hit Save CSS.

Again, adjust the width value according to your liking and enjoy your new customized width!