Applying custom CSS can significantly enhance the design and functionality of your Divi website. However, it can be frustrating when your custom CSS doesn't seem to work as expected.
In this article, we will help you troubleshoot and resolve common issues that may be preventing your custom CSS from taking effect.
We’ll cover various potential causes, such as specificity conflicts, caching problems, and syntax errors, and provide you with practical solutions to ensure your custom styles are applied correctly.
Custom CSS code in Divi can be added in different locations:
In Divi → Theme Options → Custom CSS area
In Page Settings → Advanced Tab → Custom CSS
In Section/Row/Column/Module Settings → Advanced Tab → Custom CSS → Free Form CSS
In Section/Row/Column/Module Settings → Advanced Tab → Custom CSS → Module Elements
Note: In the Element's settings→ Advanced Tab → Custom CSS → Module Elements, you can only add CSS rules such as as background-color: red;
Common reasons why the custom CSS is not applied
Syntax Errors
Reason: CSS code has syntax errors
Fix: Write clean and valid CSS code. The W3C CSS Validator is a good tool for checking your CSS code for errors.
Cache issue
Reason: Your server will use a cached version of the CSS
Fix: clear the browser and server cache
Pro Tip: During the development of your website, it's best not to use any type of cache system (server-side or plugin-side).
Once everything works and looks the way you want, feel free to install a cache plugin. Our recommended cache plugin is WP Rocket.
CSS selector used doesn't exist
Reason: You might have deleted a custom CSS class and/or custom CSS ID set for an element to which you want to apply the CSS Code.
Fix: Double-check your CSS Code to ensure your CSS Selector exists on the page.