Product images align to left with Storefront 2.5.5 update

  • Resolved Nick

    (@caralis)


    4 years, 11 months ago

    My website is currently using Storefront 2.5.0. Any Storefront updates I have applied, up to 2.5.5, shift the product images to the left and removes the space between the product image and description. A chat session with a WooCommerce Happiness Engineer did not resolve the issue. It was suggested that I disable all apps to see if the problem persists. I did, and it did too. I disabled all apps, except for the following:

    Storefront Powerpack
    WooCommerce
    WooCommerce Services

    I then applied the Storefront 2.5.5 update. The issue as described above then happens.

    After the update, I included the following CSS to the style sheet:

    ul.products li.product .woocommerce-LoopProduct-link {
    margin: 0;
    }

    Images still shift to the left. I removed the above CSS, then included this:

    .woocommerce-product-gallery__image {
    text-align: center !important;
    }

    Again nothing. I found the above CSS in this forum.

    Interesting though, the 2.5.5 update centers the header logo, as it should be, but shifts all product images to the left. Storefront 2.5.0 pushes the header logo slightly left. I’m somewhat embarrassed to say this, all the changes described above were done on the production site, at low traffic volume times, of course.

    The link is to images of what happens when Storefront 2.5.0 and 2.5.5 are applied.

    A resolution to the image placement would be most certainly appreciated. Thank you for your help.

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

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Support Yuki K a11n.

    (@yukikatayama)

    Automattic Happiness Engineer

    Hi @caralis,

    Do the images center when Powerpack is deactivated? I’m wondering if there were any Designer changes made that could be affecting the images. Also could you provide a link to your site?

    Plugin Support Yuki K a11n.

    (@yukikatayama)

    Automattic Happiness Engineer

    We haven’t heard back from you in a while, so I’m going to mark this as resolved – if you have any further questions, you can start a new thread.

    Thread Starter Nick

    (@caralis)

    Thank you for your reply. I disabled Storefront Powerpack 1.5.0, then applied Storefront 2.5.5. The product images again are pushed to the left of the description. I quickly restored the backup made prior to these changes, as preforming the above updates on a production site made navigation nearly impossible. I really wished I could resolve this issue. I think I made a mistake by choosing the WordPress platform for my website.

    Please help me check my website https://demo.monngonnambo.com/ has the same problem after update storefront 2.5.5. You will see different from https://monngonnambo.com. Thanks!

    • This reply was modified 4 years, 11 months ago by chuonglnt.
    Thread Starter Nick

    (@caralis)

    Hello @chuonglnt

    It appears as if you have solved the image alignment issue. I have visited your website, and the product images I have found are centered. May I ask how you solved this issue? I am unable to solve this problem on my website. If you decide to reply, please accept my sincere “Thank You!”

    Thanks Nick to answer. I did add more code on additional css wordpress:

    img.attachment-woocommerce_thumbnail {
    margin-left: auto;
    margin-right:auto;
    margin-bottom: 1em;
    }
    ul.products li.product.product-category img, ul.products .wc-block-grid__product.product-category img, .wc-block-grid__products li.product.product-category img, .wc-block-grid__products .wc-block-grid__product.product-category img {
    margin-bottom: 1em;
    margin-right: auto;
    margin-left: auto;
    }

    and it working now.

    Thread Starter Nick

    (@caralis)

    @chuonglnt Thank you kindly for your reply! Yes, this corrected the undesirable results of the product images shifting to the left. They are now centered, and the spacing between images and description are correct as well. I am so grateful that you were able to help with this issue, where others were not. Please accept my sincerest “thank you!”

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Product images align to left with Storefront 2.5.5 update’ is closed to new replies.