Custon CSS not load correctly on first load of every page

We are experiencing an issue with the initial load of the CSS on every page of our site. The page loads, but some parts of the custom CSS we have written do not load. However, if we reload the page, all of our custom CSS loads correctly. The site is in developer mode. Below, you will find information on how you can connect and check it yourselves.

Hello,

Your given login details are not working. Please share the correct login details then I will check the issue and give you a possible solution.

Best Regards

This is the login details but first you have to change the host file of your computer.

Hello,

Navigate to Theme Settings > Performance > Preloader > Enable the option “Prelader” and check how it works.

Best Regards.

This isn’t working. Maybe you didn’t understand my question correctly. We have written custom CSS in the Theme Settings > Custom CSS. The problem is that on the first render, and therefore the first cache of each page of the site, this CSS doesn’t appear, and we have to refresh the site (F5) for it to show up. Once the cache is made, the CSS will appear normally on the site, but as soon as we make any changes to the site, the same problem occurs again, and each page needs to be cached again.

Hello,

Please deactivate all the 3rd party plugins and activate only theme-required plugins on the site and then check the issue. I am sure your issue will be solved. Then Activate the 3rd party plugins one by one and check which plugin is creating the issue for you.

Otherwise, if the issue still exists then keep the 3rd party plugins deactivated and let me know i will further check on your site and give you a possible solution.

Best Regards

Hello,
We have deactivate all 3rd party plugins and we still have the same problem so check it if you can.

Hello,

Can you please record a short video for better understanding to reproduce the issue on your site.

Best Regards.

At the beginning of the video, the CSS appears correctly because it has been cached on the site. After we update the CSS and refresh the site, it doesn’t render correctly on the first load, and we need to refresh the page again for it to display properly. The same issue occurs when we add or edit a product.
You can check it on the video below.

Video:

Attachments:

You must be logged in to view attached files.

Hello,

It seems to be a cache problem. Try to temporarily disable the CDN if you are using and remove the server cache/browser cache /site cache or check the issue in incognito mode.

Best Regards

We have disabled them, but the same problem still exists. We are using LiteSpeed Cache, could you also take a look at it?

Hello,

Check back your site after completely clearing the browser cache and check the issue. Also check back your site in the incognito browser.

Best Regards

We have tried all of these, but it’s still not working properly. Once again, the site needs to be cached from scratch every time we make changes.

Hello,

Could you please check how it works with some default WordPress themes like TwentyTwenty Four or WooCommerce Storefront to understand is it our theme issue or not?

Best Regards

How can we test it with a different theme since the CSS has been written based on yours? If we change the theme, the CSS will be lost since it is written in the Theme Settings > Custom CSS of your theme.

Hello,

You said:
The same issue occurs when we add or edit a product.

Try to add or edit the product with the default theme and check the issue.

Best Regards

We mean that it creates the same issue in the CSS that we have added in Theme Settings > Custom CSS. It causes a problem with the CSS of the menu as shown in the video we sent you, as well as with the CSS of the custom buttons we created within the custom CSS field provided by your theme. In case we change the theme, there will be no issue because it will use the default CSS of the respective theme and not the one we have written in your theme.

Hello,

Could you please try checking the issue in an incognito window as a guest user?

Best Regards

All the things you have suggested, we have already tried. I created the ticket in case you know something more beyond the usual tests we have conducted so far.

Hello,

First please update the WP version to the latest version 6.6.2 and then check back the site.

Also, if still your issue not solved then Please deactivate all the 3rd party plugins and activate only theme-required plugins on the site and then check the issue. I am sure your issue will be solved. Then Activate the 3rd party plugins one by one and check which plugin is creating the issue for you.

Otherwise, if the issue still exists then keep the 3rd party plugins deactivated and then let me know so I will check it further.

Best Regards.

We have tried everything you suggested and the same problem still persists. I have taken a backup of the site. Please log in and check it out, and make any necessary changes to fix it.

Hello,

Custom code may not work after the initial page load unless the user has used a selector in their custom code that coincides with a theme selector they are trying to override. In such a case, it is necessary to increase the specificity of the custom selector so that it overrides the theme styles regardless of where the code is located.

For example, if you need to change the margin-bottom of a widget title class (.widgettitle, .widget-title https://monosnap.com/file/WWFinhb9isNIWLxCQiEb8bDWatzHfZ), the custom code should be written by strengthening the selector with an additional tag or class. In the following code example, the selector has been strengthened using the body tag.

WRONG:

.widgettitle, .widget-title {
   margin-bottom: 10px;
}

CORRECT:

body .widgettitle, body .widget-title {
   margin-bottom: 10px;
}

Best Regards

[Author]

Posts