Product pictures create empty space on product page

  • Resolved atelierkmercier

    (@atelierkmercier)


    3 months, 3 weeks ago

    Hello,

    I use the free version of Kadence with WooCommerce.

    It seems like my product pictures are breaking the layout of the product page.

    When I look at my product pages in the editor (or as visitor when I’m logged in) everything looks fine and the page shows exactly as it should.? But when I’m not logged in WP, there's a big empty space in the middle of all my product pages.? On desktop, it’s between the pictures/short description area and the description tabs and on mobile, the empty space is between the pictures and the short description.? I looked in different browsers (Chrome, Edge and Firefox) and it’s always the same.

    I published a product without a picture and this page looks fine.

    Here’s the link to one of my product page:
    https://karinamercier.com/cream-infinity-scarf-with-black-polka-dots/

    Here’s the link to the product page without picture:

    Red and Black Houndstooth Infinity Scarf - Karina Mercier

    All my product pictures are 1000 x 1000 px or less.? Most are square but some are rectangular.

    In Customize > Woocommerce > Product Images, ?the main image width is set to 800.

    I tried to switch to my backup theme ( twenty-twenty-four ) and there is no empty spaces and everything seems fine.

    Any ideas on how I can solve this issue?

    Thanks

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)

  • Hi there!

    I’d be happy to help.

    There is a high value of height being assigned to the WooCommerce Product Gallery element – https://share.zight.com/BluvvXb8

    The incorrect height value can happen because of some optimization options. I saw that you have LiteSpeed Cache.

    If you’ve chosen “Deffered” for the Load JS Deferred option, choose Delayed instead (https://share.zight.com/nOu7762K).

    Purge your Litespeed cache as the last step to fix the large gap issue.

    I hope this helps. Please let us know how it goes.?

    Cheers,
    Karla

    Thread Starter atelierkmercier

    (@atelierkmercier)

    Thank you for your answer Karla.
    I changed the ?Load JS Deferred? to delayed but the pictures disappear…

    Hi there!

    You’ll see that when there’s no LiteSpeed optimization on the product page, the large gap is not visible – https://karinamercier.com/cream-infinity-scarf-with-black-polka-dots/?LSCWP_CTRL=before_optm

    Could you give me screenshots of your CSS and JS file optimization settings? I’d like to test it on my website and see which options can be tweaked.

    Regards,
    Karla

    Thread Starter atelierkmercier

    (@atelierkmercier)

    Hi,

    Yes, I did try to test it this way and I also disabled the cache on one of the product page and it looks fine.

    Here’s the link to the screenshots of my settings:
    https://www.canva.com/design/DAGKFm7nqBY/ncBPQAld3WxcmZM-Ip85jg/view?utm_content=DAGKFm7nqBY&utm_campaign=designshare&utm_medium=link&utm_source=editor

    Thank you !!

    Thread Starter atelierkmercier

    (@atelierkmercier)

    Just to let you know that, as per the suggestion of LiteSpeed support, I’ve reset to default settings and the empty space is gone. I then tried to use the basic presets and it’s Ok. If I use the Advanced (Recommended) Presets, the empty space appears again. So, I’ll leave it at the Basic preset settings for now, everything seems to work well…

    Thank you very much for taking the time to help, I appreciate greatly!

    Hi!

    Glad to know that you’ve come up with the best optimization settings. This helps other users who might have similar issues.

    I kindly ask for your help to mark this as resolved. There’s a drop-down on the right side of the post for ‘status’, which includes options to resolve your post. You can also use the checkboxes at the bottom of the reply form, to reply and mark a post solved.

    Thank you, and I’m happy we could help you out!

    Regards,
    Karla

    Thread Starter atelierkmercier

    (@atelierkmercier)

    Hi, I don’t think it’ the best settings, performance on mobile is not as good as it was before but, at least the product page is not broken anymore…
    Thanks!

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