Describing the most common mistakes that cause your custom CSS doesn’t work
Sometimes you find yourself needing to add custom CSS codes to add or override some stylings.
If you found your custom css code isn’t working, you can follow these solutions.
Here are the most common mistakes causing the custom CSS doesn’t work:
Inspect the element!
First of all, make sure you have added the correct CSS. You can check it by inspecting the element on your test page.
Validate your code!
After that, make sure there is no wrong character in the custom CSS. Sometimes, a simple “/” character will cause many issues on the website.
Forgetting the “}” character (closing tag) is one of the common issue.
You may also want to check and validate your CSS using a CSS beautifier tool such as cleancss.com.
The Importance of Priority!
You should also make sure your CSS has the right priority to apply to the element. Here is an example of when the browser would decide to apply the second CSS to the page, rather than the first one:
Lower priority:
body {background: white;}
Higher priority:
body {background: black !important;}
So, you may want to add !important at the end of the rule to fix the issue.
For more information about CSS priority please visit https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Clear the Browsing Cache
Sometimes your browser will show you a cached copy of your website instead of showing the new one. Each browser has a different process to follow when clearing the cache. Detailed information on each browser is mentioned below:
Child theme’s problems
It’s possible that you have added the CSS code into your child theme. Here are some common mistakes related to the placing the codes into the Jupiter X child theme:
- You added the CSS into jupiterx-child/style.css file. This file is not going to be enqueued on your pages. So if you added the CSS codes on this file, you should not see any effect on your pages. Move your codes to jupiterx-child/assets/less/style.less instead.
- Make sure the jupiterx-child/assets/less/style.less is being called in the child theme’s functions.php. Just make sure this line exist and not commented out:
jupiterx_add_smart_action( 'wp_enqueue_scripts', 'jupiterx_child_enqueue_scripts', 8 );
function jupiterx_child_enqueue_scripts() {
// Add the theme style as a fragment to have access to all the variables.
jupiterx_compiler_add_fragment( 'jupiterx', get_stylesheet_directory_uri() . '/assets/less/style.less', 'less' );
// Add the theme script.
wp_enqueue_script('jupiterx-child', get_stylesheet_directory_uri() . '/assets/js/script.js', [ 'jquery' ], '', true );
}
- Flush the assets in Jupiter X -> Control Panel -> Settings once to see the effect. It’s possible that your changes are not getting compiled by the Jupiter X less compiler. So, try recompiling them by flushing the assets in Jupiter X -> Control Panel -> Settings.
- The CSS snippet might be invalid and by that, it is skipped due the compilation. The Less compiler will skip the invalid CSS properties so make sure they are valid before you place them in the style.less file otherwise you won’t see them compiled.
