Custom CSS not working

Issue

You have added Custom CSS to an Elementor widget, column, or page, but the styling changes do not appear on the live website.

Solution

CSS issues are typically caused by syntax errors, caching conflicts, or theme overrides. Follow the steps below in order to resolve the issue.

Following are the suggested solutions.

Check Your Code Syntax and Selectors

Before troubleshooting anything else, verify that the code itself is valid.

• Check for typos: A single missing semicolon ; or closing bracket } will prevent the CSS from rendering. You can use a free online tool like CSS Lint to validate your code.

• Use the correct prefix: In Elementor Pro, you often need to use the selector prefix to target the specific widget wrapper. [Insert link: Read our guide on using CSS Selectors in Elementor].

• Check specificity: Ensure another stylesheet isn’t overriding your code. You may need to add !important to your CSS rule as a temporary test (e.g., color: red !important;).

Learn more about CSS Selectors in Elementor.

Regenerate CSS

Follow the below steps:

1. From WP Admin, navigate to Elementor>Editor>Tools.
   

   

2. In the Elementor Cache field, click Clear Files & Data.
   

   

3. Click Save Changes.
   

   

Clearing Site Cache

Check if you have any caching plugins on your site or any server level caching enabled. Clear those caches.

Clear Browser Cache

Clear browser cache or check the site in a private/incognito window.

Theme Compatibility

This issue can be because of the theme. You can try changing to the default theme of WordPress such as Twenty Twenty-One. If this solves the problem, contact the developers of your theme.

Multiple Builders

If you are using multiple page builders alongside Elementor, they can interfere with the Elementor’s performance. The other builder can override the content you have created with Elementor. This stops from displaying the CSS changes. 

To solve this issue: 

1. Open the page having CSS issues.

2. From top-right, click Update >Save as Template.
   

   

3. Go to Pages > Add New Page.
   

   

4. Click the Add Template icon. The Library window opens.

5. Click My Template. The list of available templates opens.

6. For the desired template, click Insert.
   

   

This should solve the CSS issue.