Global blocks break between 4.2.3 and 5.2.3

[QuickFix]

Hi there,

We’re trying to upgrade Cornerstone and X from 4.2.3 to 5.2.3. The upgrade appears successful, but global blocks used for the headers “breaK” on random pages with seemingly no rhyme or reason.

The global block contains straight HTML, and then CSS/JS is being set in the appropriate places in Cornerstone. On some pages it works fine, but on about a dozen others the CSS or JS isn’t being loaded so we get a big sprawl of brokenness at the top of those pages.

We thought maybe it’s because some pages make use of Classic Elements, but confirmed that this doesn’t seem to make a difference.

Has anyone seen this before, and are there ways to troubleshoot what’s going on here?

Thanks

[ruenel]

Hello @QuickFix,

To better assist you with your issue, kindly provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
- Confirmation that we can access and make changes to your site
​
To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

[QuickFix]

Thanks, secure note added.

[ruenel]

Hello @QuickFix,

Your custom CSS for the global block is broken which affects the display of the block.

If you are going to add comments in CSS code, you should be doing it like this:

/* This is a CSS comment */
.class {

}

For reference: https://www.w3schools.com/css/css_comments.asp

[QuickFix]

Nice, thank you! I’ll work with the client to help them fix their CSS to see if that takes care of it.

This same global block is working in some areas and not in others; what would cause it to (seemingly) randomly work or not? In some pages, this block works fine. If the markup is bad it should break everywhere, right?

[QuickFix]

We’ve fixed the comment syntax in the block’s custom CSS, but nothing has changed. Some pages display the global block properly, some don’t.

[ruenel]

Hello @QuickFix,

In one of your section settings, you have added this broken inline element CSS:

@media only screen and (max-width: 981px) {
  $el{
    margin-top:170px!important;
  }
  
@media only screen and (max-width: 500px) {
  $el{
    margin-top:130px!important;
  }

You should properly closed @media blocks to prevents any issues or have conflicts with any other codes. The correct code should always be:

@media  only screen and () {
   element {
   }
}

Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

Intro to CSS - https://goo.gl/mFuWQT
How to get CSS selectors - https://goo.gl/BmoH39
Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa
CSS Media Queries - https://goo.gl/L3ZHNg

Best Regards.

[QuickFix]

Thanks, I’ll have them take a look at this also.

However, my larger question is that the client’s CSS hasn’t changed. Everything was working as-is (Pre-existing CSS mistakes included) prior to updating the theme. Only AFTER we updated Cornerstone and X did any of this present itself as a problem.

What is it that changed?

[tristup]

Hi @QuickFix,

Nothing has been changed as such in this regards. The Cornerstone accept the CSS comment as it need to be and explained into link given by my colleague. So the CSS comments need to maintain the standard as defined.

Thanks for understanding

[QuickFix]

I understand that there are CSS issues on this site. I have no doubt that broken CSS can produce a broken display.

However: This exact same CSS is running on their live site, errors and all, and it works fine with Cornerstone 4.2.3 and X Theme 7.2.3. It was only until AFTER we upgraded the plugin and theme that any issues presented themselves.

The theme must be doing SOMETHING different if that one change broke half the site. Bad CSS would have crippled things long before we updated anything if that’s really the root cause here. Any suggestions beyond “your client needs to redo all their CSS” would be appreciated.

[tristup]

Hi @QuickFix,

I understand that it is working in your sites where the previous version of themes is installed. The updated version of the theme resolved all types of errors and anomalies that the previous version have, your issue might be one of them.

Thanks for understanding