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:


Did this answer your question?