Related product details cut off in Safari

[hyperdrive_boom]

Good evening,

I am using the latest version of Pro and Woocommerce and have a problem with related products displaying on a single product page correctly on Apple Safari.

On Chrome and Firefox I can see it correctly like so:

But on Safari (desktop and devices) the title and price gets cut off:

I temporary removed my CSS to test to see if it was something I had done and the same error remains so I have put this back

What do I need to do to make this visible? Thank you

[ruenel]

Hello @hyperdrive_boom,

Thank you for the very detailed post. I have investigated your site thoroughly and I found out that you have added this code:

.single-product li.product {
    margin: 0 4% 7.25% 0;
}

Please remove this code and replace it with this CSS code instead:

[class*=woocommerce] .upsells, [class*=woocommerce] .related, [class*=woocommerce] .cross-sells {
    margin-bottom: 0;
}

Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third-party developer.

Best Regards.

[hyperdrive_boom]

Perfect @ruenel thank you!

[friech]

We are delighted to assist you with this.

Cheers!