There are a number of possible causes why your custom CSS may not be applied.
First, let's see where we can add Custom CSS:
A. Divi Theme Options > Custom CSS area:
B. Page Settings > Advanced Tab > Custom CSS
C. Section/Row/Column/Module Settings > Advanced Tab > Custom CSS
There is a big difference between the Custom CSS in areas (A, B) and the Custom CSS in areas (C).
In the first two areas (A and B) full CSS code must be written, meaning we need to include the CSS selector (CSS class or CSS id) and all the CSS properties we want to apply to a certain element.
Example:
.my-selector {
background-color: red;
}Whereas in area C we only need to add the CSS properties. for example, if we are working with a Text Module and we want to apply a background-color using the Custom CSS, we need to use the Main Element section and only add the CSS property:
background-color: red;
The CSS selector will be built by Divi, so we don't have to worry about it.
Why the custom CSS code is not getting applied
1. Syntax Errors
Reason: CSS code has syntax errors
Fix: Make sure that you write clean and valid CSS code. A good tool for checking your CSS code for errors, amount the build-in Syntax Checker is www.csslint.net
2. Cache issue
Reason: your server will use a cached version of the CSS
Fix: clear the browser and server cache
Extra 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 wanted, feel free to add at most 1 cache plugin.
3. CSS selector used doesn't exist
Reason: You might have deleted a custom CSS class and or 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.