[Resolved] Woocommerce product page displays different on Chrome to Edge, Opera

[Len]

With Chrome, the product image is set to the left, the title, price, short description and add to basket to the right with the tabs underneath at full width. This is the only browser where it looks correct.
With Firefox, Edge and Opera, the image is top left, the title block with price etc is underneath the image, with the tabs under the title block.
Not tested with Safari on iOS.
This is on a copy of the main website, for doing setup and testing.
Is there a fix for this please.
Thanks, LenW

Done some more testing, it fails in Chrome as well now, its only OK if logged into WordPress.
The issue is a conflict when Litespeed in WordPress is set to “Combine CSS”, which is not activated with logged in. I now need to work out which css file is the issue then exclude it.
So I almost have the solution, and will post the file to exclude for others who get this issue.

[Tom]

Hi there,

It sounds like maybe the mobile CSS file is being included without its media query.

Looking at your website right now, I’m not seeing any issues at all, but all the CSS is combined. Are you still seeing the issue?

[Len]

Tom
In Litespeed plugin, CSS combine and minify are both set on, but woocommerce-layout.css is excluded from
it. This sort of fixes it, however with CSS combine ON, the title block is about 20px closer to the image, and the mobile page is incorrect with a ton of whitespace and no title block.

So I have excluded the following from the combine and minify, and set both ON.
woocommerce/assets/css/woocommerce-layout.css
woocommerce/assets/css/woocommerce-smallscreen.css
gp-premium/woocommerce/functions/css/woocommerce.min.css
gp-premium/woocommerce/functions/css/woocommerce-mobile.min.css

The one CSS file that appears (at least for now) to be OK to combnine and minify is:
woocommerce/assets/css/woocommerce.css

[Tom]

I would go with a plugin like Autoptimize to do any sort of combining/minifying. It does a great job at keeping the order of things (which is very important with CSS).

[Author]

Posts