Related Products deformed

Hi there,

The issue seems to be coming from this CSS:

            .single-product #page #content #main section.related ul.products li.product.type-product {
                width: 24.9%;
                margin-left: 0;
            }

https://share.getcloudapp.com/eDuy74nN

The CSS is under <style id="wpr-usedcss">. Not exactly sure if this is from a plugin.

I don't think the width value works well if the parent is set to display: grid;.

The solution is either you remove the width value or you change the display to flex.

Hey Elvin,
I have searched for that code and found it on line 1668 of the <project.css> in the child theme.I have tried changing the width percentage but nothing happens. I have even tried removing the entire line and nothing happens. Therefore, I think I may need to take your other advice and change display:grid; but I don't know how to do this? Where is display:grid?

It's using this CSS:

.woocommerce .related ul.products {
    display: -ms-grid;
    display: grid;
    grid-gap: 50px;
    width: 100%;
}

Check this - https://share.getcloudapp.com/X6uAQwql

I think it's on the same file.

Can't find this code in that file?

It's on the same style element rather. <style id="wpr-usedcss"> embedded on the page.

Still can't find it. What is wpr-usedcss

I'm not sure what's generating it but it's definitely not from generatepress.

It's this one.
https://share.getcloudapp.com/4gunegNe

It's either this is embedded by a plugin or a child theme.

OK, I think I found it, but still not working. It is in the GP Premium Plugin. I have found the code under woocommerce>functions>css>woocommerce.min.css
I have changed display: grid to display: flex, but no change?

OK, I think I found it, but still not working. It is in the GP Premium Plugin. I have found the code under woocommerce>functions>css>woocommerce.min.css
I have changed display: grid to display: flex, but no change?

Did you change the actual file? We don't recommend doing that. It'll get wiped when you update.

I think this is done by a plugin. Can you check if there are any optimization plugins active?

Perhaps its taking ALL the CSS and embeds it. Much like Critical CSS. (perhaps it's that.)

Here's a suggestion:

Do the FF:
- Disable all plugins (especially caching plugins) except GPP and Woocommerce.
- Add this CSS on customizer's additional CSS.

.woocommerce .related ul.products {
    display: flex;
}

- Check if it works.

Hey Elvin,
That CSS definitely seems to have fixed the problem, but I am still at a loss as to why it does not change when I adjust the code in the GP Premium Plugin. As you have shown, if I change display:grid to display:flex in the developer tool, it fixes it, but when I do it to the plugin code, nothing happens.
No problem, it is fixed now with that bit of CSS, but I would be interested to know how to fix it properly in the plugin code.

Now I know where to look, maybe I will investigate further when I have more time. Thanks for your help.

All the CSS are being merged and embedded on the header (probably the critical CSS feature).

Try clearing WP Rocket's cache. I've checked the site w/ ../product/hand-tape/?nowprocket=1 meaning wp rocket disabled.

It displays flex intended as shown here - https://share.getcloudapp.com/JruD82nN