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?
4
Answers
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.
I have same problem but I couldn’t find solution yet ! but I debug too much and get some information .
this problem will happen when I go to the web in mobile (Android And IOS) and sometimes the elementor post css doesnt load .
The Elementor create css for each posts in your website when you edit your page with editor of elementor .
I found that’s when this happen , the posts that is in wp-content/uploads/elementor/post-{id}.css doesn’t find and return this error on console :
I think this is another bug of elementor !
and for solution :
Install some plugin could help like wp-rocket that will cache
the css and js . thats why the elementor wont upload the css of posts and wp-rocket will do this
maybe we could write script that’s will check the 404 errors after window.load event
and then if the css of post didn’t find will refresh the page !
but i really don’t want to do these solutions and this bug should have another reason that i want to find it !
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.
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/csswp-content/uploads/plugins/elementor/assets/cssAlso, the CSS are maintained in assets folder of
wp-content/uploads/plugins/elementor/assets/cssand 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 ispost#.css. So, I guess when you regenerate, thosepost.cssfiles 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.cssand 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.