Sometimes it happens that elementor does not load the css

Question

I am using elementor pro to build my website. Everything works correctly, but sometimes it happens that, by reloading the page, the css is not loaded and the display goes back to being without style, but simple basic html or styles integrated in elementor itself.

What could be the cause of this problem? It doesn't happen often, but for example if I reload the page about fifty times, then for sure it will happen once or twice that the css will not load.

This does not happen with the pages I built without elementor. So if I have a template with html + css it never happens.

Has anyone ever had this problem?

Answer 1

I was facing the same issue with the elementor not loading generated css file, seems to be a bug in the elementor but anyways this is how you can fix it.

Hop into elementor's settings -> Advanced Tab -> Change the CSS print method from external file to internal embedding

This will do the trick instead of generating the external css file and then downloading it, it will inject the css into the style tags hence we don't need elementor to download the external file.

Answer 2

I have the same problem but I couldn't find a solution yet! However, after debugging for a while, I have some information. This problem happens when I go to the web on mobile (Android and iOS) and sometimes the CSS that the Elementor posts doesn't load. The Elementor creates CSS for each post on your website when you edit your page with the Elementor editor. I found that when this happens, the posts that are in wp-content/uploads/elementor/post-{id}.css aren't found and this error is displayed on the console:

Failed to load resource: the server responded with a status of 404

I think this is another bug of Elementor!

and for solution :

• Install some plugins that could help, like wp-rocket, that will cache the CSS and JS. That is why the Elementor won't upload the CSS of posts and wp-rocket will do this

• Maybe we could write a script that will check the 404 errors after window.load event and then if the CSS of the post isn't found, we can refresh the page!

But I really don't want to do these solutions and this bug should have another reason and I want to find it!

Answer 3

I have the same problem right now, basically the theme is written on Wpbakery but I don't want to use bad skins so I installed elementor pro on it.

Sometimes, as you said, when I refresh the page, I see Css styles distorted, I think it's because of the effect of the load order of the css.

You can use the CSS you use in Elementor in the customize section of Wordpress to make it load early.

Answer 4

This issue I got on our two sites when we did update. After a lot of research I was able to find a workaround. I was able to fix this to a major extent. What I noticed that when you update Elementor I saw it gets updated at two file locations;

• wp-content/uploads/elementor/
• wp-content/uploads/plugins/elementor/ I don't know why the first one even exists or comes with the Elementor installation. Then I dug a little more, it looks like Elementor creates it to save the form data or something. Link to post: https://elementor.com/help/form-widget-faq/
  Though I have not have used forms yet still it got created. Anyways, moving on I saw post css are maintained here in this folder: wp-content/uploads/elementor/css

wp-content/uploads/plugins/elementor/assets/css

Also, the CSS are maintained in assets folder of wp-content/uploads/plugins/elementor/assets/css and this is by design.

When I log in to Wordpress, all pages look good. But when I go to the pages public view some pages throw post-130.css not found. The error pattern is post#.css. So, I guess when you regenerate, those post.css files in the uploads folder (wp-content/uploads/elementor/css/) got deleted or something happened to these separately stored post-level CSS files..

Solution
I just created the missing post file and named it as given in error i.e. post-130.css and copied another CSS file's data which has similar look of the missing page and it worked! I tested in public view and worked like a charm. I know this is not a good solution and workaround.

Answer 5

Make sure you close ALL css rules in your custom css panel.

.some-class {
    display: block;
}

If you have one unclosed block like:

.some-class {
    display: block;

Then all custom css (and custom fonts used on that elementor page) will stop working.

Answer 6

In my case I just changed a line of text and updated the file. Reloading the page did the trick. Another oddity, the page displayed fine in Chrome, but not Safari.

Answer 7

In my case, I had entered some custom CSS in one Elementor Container but accidentally omitted the "right curly brace" ("}"). Because of that, the CSS file generated for the post didn't work completely. Once it hit that error, the rest of the custom CSS (and there was a lot) didn't work outside of the editor.

I only figured it out when I loaded the post's custom CSS file that Elementor had created, into Notepad++ and set the language as CSS. It helped me visually see where a selector was not being recognized as a selector because the CSS parser had stopped parsing the file.

Answer 8

I had similar issue. I resolved it by:

• Clicking Update from Elementor editor
• Going back to Wordpress -> Pages
• Select the first edit option
• Click on Preview Changes

It then generates a file post-xxx.css in the folder:

/opt/bitnami/wordpress/wp-content/uploads/elementor/css

Then it back to normal.

Wordpress version: 6.5.5

Elementor version: 3.22.3

Elementor pro version: 3.22.1