Layout shift following update

Hi, I have had a layout shift on the homepage of my website following the latest theme and cornerstone updates. A classic element with short code to show product categories is now showing as 2x2 block with a large gap in the middle rather than the line it was before. I have cleared the cache after each update and this has made no difference

Is there a fix that can be applied?

The homepage is www.yogipod.co.uk and the element that has shifted is below the title “discover the full Yogipod range”

Thanks

Hi @chrisjdavies

Thanks for reaching out.
It seems that the minification of the CSS code is the actual reason behind it, I would suggest you temporarily disable the minification. If that works for you, I would recommend you to exclude the X/framework/dist/css/site/stacks/icons.css file to be minified.
If that does not help, please provide login credentials for your site in a secure note to examine it further, including:

– WordPress Site URL & Login URL
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

Please note that, a few hours ago we have released another version of the theme with some fixes, I would recommend you to update your theme to the latest one.
I would also suggest you follow the below steps while updating to the latest version of the theme.

  1. Delete the Cornerstone
  2. Update the X theme to the latest version on automatic updates
  3. After the X theme is updated, use the link in the dashboard to automatically install the Cornerstone. It will be at the latest version

Thanks

@tristup Thanks for this reply. When I disable the CSS minify the layout reverts back to normal. The only problem is it doesn’t stay that way when the file path is added to the exclusion. When CSS minify is turned back on, even with the exclusion the layout reverts to the broken version.

Any ideas? I’m using W3 Total Cache as the plug in for minification and caching

@tristup I’ve also now noticed since these latest updates that the CSS I added to make the mobile shop layout two columns instead of one is also not working now. Any ideas for this?

The CSS previously added was:
@ media screen and (max-width: 480px) {

.woocommerce .cols-2 li.product, .woocommerce .cols-3 li.product, .woocommerce .cols-4 li.product, .woocommerce.columns-2 li.product, .woocommerce.columns-3 li.product, .woocommerce.columns-4 li.product {

width: 48% !important;

}

}

Hi @chrisjdavies,

In order to help you further with your issue, we need to check your wordpress dashboard. To do that, please give us the following information in a Secure Note.

  • WordPress Login URL
  • Admin level username and password

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

On the other hand, the css code isn’t working because there should no space between @ and media it should be like this:

@media screen and (max-width: 480px) {
 // your custom code
}

Hope that helps.

Thank you.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.