Home › Forums › WoodMart support forum › Custon CSS not load correctly on first load of every page
Custon CSS not load correctly on first load of every page
- This topic has 22 replies, 2 voices, and was last updated 2 weeks, 3 days ago by Aizaz Imtiaz Awan.
-
AuthorPosts
-
September 5, 2024 at 10:25 am #595405
webgrowth.grParticipantWe 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.
September 5, 2024 at 1:35 pm #595459
Aizaz Imtiaz AwanKeymasterHello,
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
September 6, 2024 at 9:10 am #595635
webgrowth.grParticipantThis is the login details but first you have to change the host file of your computer.
September 6, 2024 at 12:59 pm #595723
Aizaz Imtiaz AwanKeymasterHello,
Navigate to Theme Settings > Performance > Preloader > Enable the option “Prelader” and check how it works.
Best Regards.
September 6, 2024 at 1:17 pm #595730
webgrowth.grParticipantThis 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.
September 6, 2024 at 2:41 pm #595752
Aizaz Imtiaz AwanKeymasterHello,
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
September 9, 2024 at 9:11 am #596054
webgrowth.grParticipantHello,
We have deactivate all 3rd party plugins and we still have the same problem so check it if you can.September 9, 2024 at 12:25 pm #596135
Aizaz Imtiaz AwanKeymasterHello,
Can you please record a short video for better understanding to reproduce the issue on your site.
Best Regards.
September 9, 2024 at 3:01 pm #596197
webgrowth.grParticipantAt 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.September 9, 2024 at 3:04 pm #596198
webgrowth.grParticipantVideo:
Attachments:
You must be logged in to view attached files.September 10, 2024 at 10:00 am #596339
Aizaz Imtiaz AwanKeymasterHello,
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
September 10, 2024 at 12:46 pm #596410
webgrowth.grParticipantWe have disabled them, but the same problem still exists. We are using LiteSpeed Cache, could you also take a look at it?
September 10, 2024 at 3:18 pm #596448
Aizaz Imtiaz AwanKeymasterHello,
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
September 10, 2024 at 4:05 pm #596460
webgrowth.grParticipantWe 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.
September 11, 2024 at 9:45 am #596615
Aizaz Imtiaz AwanKeymasterHello,
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
September 11, 2024 at 9:56 am #596624
webgrowth.grParticipantHow 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.
September 11, 2024 at 11:41 am #596682
Aizaz Imtiaz AwanKeymasterHello,
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
September 11, 2024 at 12:33 pm #596698
webgrowth.grParticipantWe 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.
September 11, 2024 at 12:58 pm #596703
Aizaz Imtiaz AwanKeymasterHello,
Could you please try checking the issue in an incognito window as a guest user?
Best Regards
September 11, 2024 at 1:11 pm #596706
webgrowth.grParticipantAll 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.
September 12, 2024 at 2:05 pm #596996
Aizaz Imtiaz AwanKeymasterHello,
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.
September 13, 2024 at 4:57 pm #597316
webgrowth.grParticipantWe 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.
September 16, 2024 at 9:45 am #597616
Aizaz Imtiaz AwanKeymasterHello,
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
-
AuthorPosts
- You must be logged in to create new topics. Login / Register