A very common issue in Elementor is that your custom CSS might not work sometimes.
While Elementor Pro lets you use custom CSS script to add more style to your pages, a tiny mistake can block the code from operating.
As a new user, the problem might be very frustrating, but we got your back.
In this article, we will explore standard solutions to help you fix custom CSS not working on your Elementor website.
Why Is My Css Not Working
There could be several reasons why your CSS is not working. Here are some common reasons:
CSS has a specific syntax, and even a minor error can prevent your CSS from working. Double-check your code for any syntax errors.
If two or more CSS rules target the same element, the one with higher specificity will take precedence. Make sure your CSS selectors have the correct specificity.
CSS rules are applied in a specific order, with later rules overriding earlier ones. Make sure your CSS is loaded in the correct order.
If there are conflicting styles for the same element, only one style will be applied. Check if there are any conflicting styles that are preventing your CSS from working.
Sometimes, your site cache may affect a lot of things in the backend.
If your website is cached, it may not reflect the changes you made in your CSS. Clear your browser and server cache to ensure that your changes are reflected.
How To Fix Custom CSS Not Working
If you’re a web developer who is familiar with custom CSS, you know how frustrating it can be when changes you make don’t appear on your site.
For a beginner developer, that would bring more pain to the problem.
It can be quite challenging to identify why the CSS is not working as expected. Here are some common solutions to fix custom CSS issues.
The first solution to try is to regenerate your CSS.
You can easily do this by going to WP admin > Elementor > Tools > Regenerate CSS.
After that, you should clear both the WP and browser cache, then refresh the page. This will help the browser load the updated CSS.
Clearing Site Cache
Another possible issue could be site caching. Check if you have any caching plugins or server-level caching enabled on your website. If so, clear those caches, and try refreshing the page.
Clearing Browser Cache
Sometimes the problem could be with your browser cache. Try clearing your browser cache or viewing the site in a private or incognito window. This will ensure that the browser loads the latest version of the website.
If you’ve tried the previous solutions and the CSS is still not working, the issue could be with your website’s theme.
Sometimes custom CSS doesn’t work well with certain themes. Try switching to the default theme of WordPress, such as Twenty Twenty-One, and see if the problem is resolved.
If it doesn’t fix the issue, you can contact the developers of your current theme and ask for assistance.
Finally, if you’re using another page builder alongside Elementor, it could be overriding the content you’ve made with Elementor.
This can prevent the CSS from displaying changes.
To solve this issue, save the template, and then add it to a new page. Hopefully, this will resolve the problem with page builder overrides.
Have you tried these solutions above and fixed your Custom CSS issues?
If yes, we are glad that we could help you.
Or you can share your issue with us if the mentioned troubleshoots don’t fix the Custom CSS not working problem on your site.
If you are trying to add custom CSS and it is not working, there might be some reasons. You need to find the issue and fix it as soon as possible to get it going.
- Check if you have selected the correct site in the Elementor editor.
- Make sure that the “Enable CSS regeneration” option is turned on in the Elementor settings.
- Try clearing your website cache and browser cache to ensure that you are viewing the latest version of the website.
- Check if any other plugin or theme is conflicting with Elementor
- Make sure that you have correctly linked your custom theme with Woocommerce. You can do this by adding the following code in your theme’s functions.php file: add_theme_support( ‘woocommerce’ );
- Check if the CSS selectors used in your custom theme are correct and match the Woocommerce template files.
- Try disabling other plugins and switching to a default WordPress theme to check if the issue is with your custom theme or some other plugin.
You can add custom CSS to WordPress in several ways:
- Adding the CSS to the style.css file of your child theme (recommended if you have one).
- Using the Additional CSS option in the WordPress customizer (Appearance > Customize > Additional CSS).
- Use a plugin such as Simple Custom CSS and JS or WP Add Custom CSS.
If the z-index is not working as expected, try the following:
- Check if the elements that you want to stack have a position property set (relative, absolute, or fixed).
- Ensure that the elements you want to stack have different z-index values.
- Check if any parent elements have a z-index value set that is affecting the stacking order of the child elements.
In WordPress, you can add custom CSS using the Additional CSS option in the WordPress customizer.
To access it, go to Appearance > Customize > Additional CSS.
If a custom font is not working, try the following:
- Check if you have correctly linked the font files in your CSS using the @font-face rule.
- Make sure that the font files are in the correct format and are located in the correct folder on your server.
- Ensure that you have specified the correct font family name in your CSS.
- Try clearing your browser cache to ensure that you are viewing the latest version of your website.