“Help! My CSS isn’t working!” – Troubleshooting CSS

“Help! My CSS isn’t working!” – Troubleshooting CSS

You’re adding CSS to your child theme’s style sheet but it isn’t working. Before you punch your stupid computer in its stupid face, check out these tips for troubleshooting CSS errors that might be causing your styles to give up the ghost.

Does any of the CSS work?

If none of the CSS is loading (and your site just looks like early 90’s HTML mess) then it could be that your entire style sheet has been added wrong. Are you enqueuing or importing? Hopefully by now you’re following best practise and enqueuing your style sheet from your functions.php file like :

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );


If your theme_enqueue_styles() function looks different to this then that could be what is causing your problem. If you’re using the @import method in your CSS style sheet then make sure it looks like this:

@import url("../Divi/style.css");

But if you are using the @import method, now might be a good time to stop. Check out the WordPress child theme codex for more information.

A full CSS meltdown could also happen if the template is being called wrong in your style sheet header.

 Theme Name: Example Header
 Theme URI: https://wpzone.co/
 Description: A Child Theme built for Divi
 Author: SJ
 Author URI: http
 Template: Divi
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html

It’s ‘Divi’ with a capital D exactly as it is on the parent theme folder. Example above for reference.


Is it the CSS thats broken or is it you?

I have a saying when it comes to coding: “Nothing good happens after midnight”. Sometimes when we’re tired, things just don’t go to plan. It could be that the CSS you’re trying to add just isn’t CSS and you need some sleep. Try adding something simple and completely unmissable to your style sheet instead, just to check that the problem isn’t you.

I add this to my style sheet:

* { background: red ; }

And when my website like this, I know my CSS works and I need to get some sleep.

css error red


I added that to the bottom of my style sheet but nothing happened!

Try adding it to the top. Did it work? If the CSS you’re applying works at the top of the style sheet but not at the bottom then somewhere in your glorious code is an error. The first ‘C’ in CSS stands for ‘cascading’ which means that if there is an error in it, only the code above the error will work, which is why * { background: red ; } did nothing at the bottom of the style sheet but made your website look like Dexter’s work table at the top.

It could be that you’ve missed a closing bracket at the end of a style or a colon is missing after a property. It could be a wrongly structured media query, or it could be that your son bashed away at your keyboard while you were getting a cup of tea (actually happened).

If you’ve got a large style sheet then it could take some time to find the error but remember, what’s above the problem will still work so if MOST of your CSS works then it’s likely the issue is at the bottom somewhere. But if almost none of it works then the issues is probably at the top somewhere.

If you have a really large style sheet you could try and place lines of CSS thoughout to help you identify the area the error is in…

* { background: red ; }
* { background: yellow ; }
* { background: green ; }
* { background: blue ; }

Try adding these lines of code at different intervals. If your site turns yellow then you know that your error is somewhere between where you added the yellow line and where you added the green line.

All of my other CSS is working. Just not this bit.

It could be being overridden by Divi’s own styles. Some CSS, such as that added by the customizer options is placed ‘in-line’ or with !important tags appended to it, which means that it’s going to be harder to clean up than coffee in your keyboard. Try adding !important tags to your own CSS or making it more specific by utilising the ID’s and classes from the page structure. For example, instead of using:

h1 { font-size: 1.8em; }


#et-main-area #main-content h1 { font-size: 1.8em; }

If push really comes to shove you could try adding the CSS to the Divi Theme Options CSS panel instead.

What if everything was working fine but stopped suddenly?

Do you have a cache plugin or system in use? Your browser could be serving up a cached page which is why you aren’t seeing your changes. There’s a quick way to check: Use your browser dev tools to open the sources and view your style sheet.

css error cache

If you can see your CSS saved in the back end of your site but not when viewing the style sheet in your browser then it’s most likely a caching issue, not a CSS issue.

Have you had a Divi CSS issue that has been resolved another way? Share in the comments and hopefully it will help someone else when looking for a solution 🙂



Stephen James

SJ is a web developer living in the coastal town of Southsea, England. He is a Divi and WordPress advocate and the founder of Divi Space.