The CSS completely breaks after updating Pro to 5.8
I have multiple sites and was able to fix them with some cache clearing. But with one site I have, I can not get it to fix. This is the article I came across.
Hi @b_lynk,
Thank you for writing in, please do the following first.
-
Ensure that you are fully up to date. WordPress, Theme, and Cornerstone (Version Compatibility)
-
Clear all the site caches (plugin, server-side, CDN, and browser’s cache) so that the code from the latest release is always in use. This will help you to avoid any potential errors. While you’re at it, please deactivate this caching feature while we tackle this issue.
-
Test for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.
If the issue persists, please provide us login credentials on a “Secure Note” so we can take a closer look.
Cheers!
Thank you for the quick response!
I have actually tried all the above lol. We have been doing a few pro updates on our sites. This seems to be the only site that wont resolve with the above suggestions. I will provide some creds on a secure note. Thank you again!
Hello @b_lynk,
There is a JS error on your page which can be found in the console. The cause of this JS error is because you have a broken Javascript code in the Cornerstone Page > JS. You inserted this broken code:
//
// No need to add script tags
// here; simply get started
// by writing JavaScript!
// Remember to save your
// changes to see them :)
//
$buoop = {
required:{
e:16,
f:58,
o:51,
o_a:45,
s:-1,
c:"67.0.3396.12",
y:18.1,
v:"1.10",
uc:11.5,
samsung:7.0
},
text: {
'msg':'This site is currently not compatible with ({brow_name}) and under.',
'msgmore': 'To utilize this site, please use another Internet browser.',
}
}
<!-- Start of bdv Zendesk Widget script -->
<script id="ze-snippet" src="https://static.zdassets.com/ekr/snippet.js?key=98565866-4766-4ca9-b8b0-c1fa4088da86"> </script>
<!-- End of bdv Zendesk Widget script -->
<script type="text/javascript">
window.zESettings = {
webWidget: {
chat: {
departments: {
enabled: []
}
}
}
};
</script>
It is already evident and indicated by the red dot in the JS code input area. This means that you are not supposed to include these lines on the red dot. Kindly remove these lines to get rid of the JS error:
<!-- Start of bdv Zendesk Widget script -->
<script id="ze-snippet" src="https://static.zdassets.com/ekr/snippet.js?key=98565866-4766-4ca9-b8b0-c1fa4088da86"> </script>
<!-- End of bdv Zendesk Widget script -->
<script type="text/javascript">
window.zESettings = {
webWidget: {
chat: {
departments: {
enabled: []
}
}
}
};
</script>
Please install the “Insert Headers and Footers” plugin. Once installed, go to Settings > Insert Headers and Footers > Footers and then insert your custom JS code.
Resolving the JS code above should prevent any issues when you update the Pro theme to the latest version.
Kindly let us know how it goes.
Thank you for you quick response!
So we removed the script from the page. Updated PRO- Builder then proceeded to follow al the steps from the mentioned guide, removing plugins, refresh style, and server cache and front-end is still looks like there is know CSS.
Note: when in the builder you can see how it should look. We have reverted so currently this is the correct look.
Hello @b_lynk,
Glad that you have reverted back to the stable version and things are for you. It would be best if you could copying your live website to your staging area. and send your details in a secure note so that we can investigate your setting without breaking your live site. Please provide the following details
- WordPress Login URL(staging )
- Admin level username and password
Thanks
Sounds good and will do, Thank you for the quick response.
Hello @b_lynk,
The given credentials for the staging site URL do not work for us. It seems that the username or password is not correct.
Please double-check. Thanks.
Sure thing I went ahead and updated the creds, should be good to go now.
Thank you!
Hi @b_lynk,
It took us some time to figure out the cause of your issue. And it was from your Global CSS
@media only screen and (max-width: 700px) {
.home-hero-section {
background-image: url(https://vz-bdv-assets.s3.amazonaws.com/wp-content/uploads/2020/10/13222247/banner-top-mobile-home.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
This block is missing the closing bracket.
This block is also an issue (waiting to happen)
@media only screen and (max-width: 1200px) {
.e405-12 > .x-row-inner > :nth-child(5n-4) {
flex-basis: calc(100% - 1rem);
}
.e405-12 > .x-row-inner > :nth-child(5n-3) {
flex-basis: calc(100% - 1rem);
}
.e405-12 > .x-row-inner > :nth-child(5n-2) {
flex-basis: calc(100% - 1rem);
}
.e405-12 > .x-row-inner > :nth-child(5n-1) {
flex-basis: calc(100% - 1rem);
}
.e405-12 > .x-row-inner > :nth-child(5n) {
flex-basis: calc(100% - 1rem);
}
}
Generated classes are not supposed to be used as the selector because that is dynamic, meaning it can change. And when that changes, your CSS becomes invalid.
Once you update the Theme to the latest version, please audit all your custom CSS, Global CSS, Page > CSS, Header CSS, and Footer Header, and in any other areas where you put custom CSS. You can use this tool to identify CSS syntax errors.
Regretfully we can not provide further support on this issue since your customization is causing it. If you are unfamiliar with code and resolving potential conflicts, you may opt-in on our One service for further assistance.
Thank you for understanding,
Thank you so much for your help, and will do!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.