Grid Layouts Broken After WordPress Update (X Theme)

It seems like updating my WordPress version to anything beyond 6.9.5 breaks the grid layout styling of my site. I’ve already tried to clear out my browser cache and deactivate plugins one-by-one, but I can’t figure out what’s causing the issue.

If you haven’t already tried it, please try to clear down Cornerstone Style Cache within Cornerstone Settings. that is what often breaks after an update

Unfortunately, clearing out the Cornerstone Cache didn’t help.

1 Like

Hello Mike,

It might be a broken HTML issue. I would suggest cloning the page and deleting the page elements one by one on the cloned page to check which element is causing the issue. If it doesn’t work for you, we need to check your settings. I would request you please share the admin login details. Meanwhile, I would suggest you troubleshoot a few of the common issues before we investigate your settings. Please share your details in a secure note. Please provide the following details

  • WordPress Login URL
  • Admin-level username and password

You can find the Secure Note button at the bottom of your posts

Thanks

Alright. I updated the secure notes.

Hello @mikedickman,

It looks like you are using the default WordPress page editor, Gutenberg, where you have added the page content. Some styles are not rendering due to cache issues. I would suggest adding these styles to the Global CSS and checking it again.

.wp-block-cover .wp-block-cover__background, .wp-block-cover .wp-block-cover__gradient-background, .wp-block-cover-image .wp-block-cover__background, .wp-block-cover-image .wp-block-cover__gradient-background, .wp-block-cover-image.has-background-dim:not(.has-background-gradient):before, .wp-block-cover.has-background-dim:not(.has-background-gradient):before {
    bottom: 0;
    left: 0;
    opacity: .5;
    position: absolute;
    right: 0;
    top: 0;
}
.wp-block-cover, .wp-block-cover-image {
    align-items: center;
    background-position: 50%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    min-height: 430px;
    overflow: hidden;
    overflow: clip;
    padding: 1em;
    position: relative;
}
.wp-block-cover .wp-block-cover__image-background, .wp-block-cover video.wp-block-cover__video-background, .wp-block-cover-image .wp-block-cover__image-background, .wp-block-cover-image video.wp-block-cover__video-background {
    border: none;
    bottom: 0;
    box-shadow: none;
    height: 100%;
    left: 0;
    margin: 0;
    max-height: none;
    max-width: none;
    object-fit: cover;
    outline: none;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
}
.wp-block-cover .wp-block-cover__inner-container, .wp-block-cover-image .wp-block-cover__inner-container {
    color: inherit;
    position: relative;
    width: 100%;
}

The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector. If you have no idea about coding, you can subscribe to One, where customization questions are answered.

Hope it helps
Thanks

If this is a cache issue, which cache am I supposed to reset to restore the old style rules? I’m not asking for help with brute-force adding the missing style rules back to the website. I just wanted to know how to restore the old style rules? Is this just an issue that’s not at all related to this theme?

Hey Mike,

This is not an issue with our theme. It is an issue with the WordPress Block Editor. Regretfully, what we’re certain is that the issue is coming from it. We don’t know the reason why. In that case, you will need to ask in the WordPress support forums. Or, you can subscribe to our One service where we provide general WordPress support.

Ok, thank you for looking into it.

You are most welcome, Mike.