Layout shifts following Cornerstone and Theme Co Updates

[chrisjdavies]

Reposting as topic was closed while I took a break over Christmas and problem is still persisting

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”

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 X/framework/dist/css/site/stacks/icons.css 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

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;

}

}

I probably need to send a secure note to @marc_a but can’t on the previous post due to topic being closed

[tristup]

Hi @chrisjdavies,

Thanks for reaching out.
We have simplified WooCommerce integration and stopped overriding a few classes and templates. Based on the classes used, it has been found that the following CSS code is missing from your site. I would recommend you to add the following CSS code into the Theme Options > CSS to avoid this issue.

.woocommerce.columns-4 li.product 
{
    width: 22%;
}

Please remember that the above code will work if it copied as it is and not conflicted with any of your existing styles.

Hope this helps.
Thanks

[chrisjdavies]

Hi @tristup

I have added this CSS to the theme options but this hasn’t solved either problem. Which was it aimed at solving?

To recap homepage still has the layout shift from updates and the mobile view of shop no longer shows in two columns as it did before the updates

[tristup]

Hi @chrisjdavies,

It seems that a few more CSS codes are overriding the code, I have tested the code into the browser debugger and it works for me. Please find the following code which may work for you, if that does not help I would recommend excluding the CSS file from minification and check.

.woocommerce.columns-4 li.product 
{
    width: 22%;
    float: left;
    clear: none;
    margin: 0 4% 55px 0;
}
.woocommerce.columns-4 li.product.last 
{
    margin-right: 0;
}

Please remember that the above code will work if copied as it is and don’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks

[chrisjdavies]

Hi @tristup. Thanks for your help, unfortunately adding that CSS into the theme options in Cornerstone does not work. I understand there is a limit to the support you can offer but this problem was caused by the theme and cornerstone update. Before then, everything was fine. I don’t have very much custom coding on the site at all as it is not something in my skills.

When I disable the CSS minification the layout shifts back to normal but excluding the path X/framework/dist/css/site/stacks/icons.css (as previously suggested) doesn’t keep the normal layout when CSS minification is switched back on.

Is there anything else to try? I am sorry to ask but I am relatively techy but not a coder and so am a bit stuck with the broken layout following the update

Thanks in advance

[christian]

Hey @chrisjdavies,

The issue here is with the CSS minification. I understand you’re excluding ../stacks/icons.css but that doesn’t seem to work. You need to contact W3 Total Cache support and ask them why it doesn’t exclude the CSS file.

I’m sorry but we could not continue on troubleshooting this as this is not a theme issue but has to do with your website optimization setup.

Regarding customizing the WooCommerce columns, you need to check the latest WooCommerce HTML structure using the browser’s inspector and apply custom CSS accordingly. Please note that this is beyond the scope of our theme support so you might want to use our Layout Builder instead. You can learn how to use the Layout Builder here https://www.youtube.com/channel/UCgY5E3tOI83kBEahh9Y3uRg

Thank you for understanding.

[chrisjdavies]

Hi @christian. Thank you for letting me know these details. Will give these options a go. Thanks for your help

[prakash_s]

Hello, @chrisjdavies,

Glad that we were able to help you. Please feel free to reach us if you have any query.

Thanks