- This topic has 3 replies, 2 voices, and was last updated 5 months, 1 week ago by Tom.
April 9, 2020 at 12:45 pm #1233106Len
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.
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.April 9, 2020 at 6:00 pm #1233363TomLead DeveloperLead Developer
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?April 10, 2020 at 2:26 am #1233647Len
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.
The one CSS file that appears (at least for now) to be OK to combnine and minify is:
woocommerce/assets/css/woocommerce.cssApril 10, 2020 at 9:51 am #1234236TomLead DeveloperLead Developer
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).
- You must be logged in to reply to this topic.