Working with custom CSS in Divi can sometimes be challenging due to the limited height of the CSS input box, making editing more difficult.
Increasing the height of the custom CSS box allows for a more comfortable and efficient coding experience by providing more visible lines of code at once.
This article will guide you through the steps to increase the height of Divi's custom CSS box, enhancing your ability to write and manage your custom styles effectively.
Increase the height of Divi's Custom CSS box using a Child theme
Install and activate a Divi Child theme
Go to WordPress Dashboard → Appearance → Theme Files Editor
Open the functions.php file and add this PHP code after the existing code
function divi_admin_custom_css() {
echo '<style id="divi-increase-css-box-height">
#divi_custom_css + .CodeMirror-wrap{
height: 800px !important;
resize: both;
overflow: auto;
}
</style>';
}
add_action( 'admin_head', 'divi_admin_custom_css' );Save your changes
Increase the height of Divi's Custom CSS box without a Child theme
Install and activate the Code Snippets plugin
Create a new PHP snippet and add this PHP code
function divi_admin_custom_css() {
echo '<style id="divi-increase-css-box-height">
#divi_custom_css + .CodeMirror-wrap{
height: 800px !important;
resize: both;
overflow: auto;
}
</style>';
}
add_action( 'admin_head', 'divi_admin_custom_css' );Check the option called Only run in the administration area
Save your changes
Note: You can adjust the 800px value to any other value of your choice(depending on if you want to make it smaller or bigger)
The result can be seen in the screenshot below:
