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

Home Forums Support Woocommerce product page displays different on Chrome to Edge, Opera

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1233106
    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.

    #1233363
    Tom
    Lead Developer
    Lead Developer

    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?

    #1233647
    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

    #1234236
    Tom
    Lead Developer
    Lead 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).

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.