How to set the dimension of the image field in the product list – part 2

This topic has 8 replies, 2 voices, and was last updated 1 year, 10 months ago ago by Olga Barlow

  • Avatar: Chris
    Chris
    Participant
    May 5, 2022 at 20:15

    I closed the previous topic therefore I am returning to it here.
    https://www.8theme.com/topic/how-to-set-the-dimension-of-the-image-field-in-the-product-list/#post-316531

    Your proposed implementation works very well in the designated areas we wrote about.

    However, we have a problem with the same in the mobile option. Picture in the link: https://prnt.sc/axAqgr94N5Lj

    How to remedy this?

    The above setting also caused the images to show up badly on the product page. In categories according to the above codes they are nicely clipped to the designated size, but on the product page they are often too large and on the entire page. What can we do about it?

    7 Answers
    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    May 5, 2022 at 23:22

    Hello,

    Remove media query for this code https://prnt.sc/Zqfp1SHK5fzZ
    Or add a media query for the smaller devices and reduce the height.

    Regards

    Avatar: Chris
    Chris
    Participant
    May 7, 2022 at 20:46

    Unfortunately this solution did not help because the height of the frame increased significantly.

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    May 9, 2022 at 16:45

    Hello,

    Unfortunately, in this case, the only solution is to use a hard crop for the images (Theme Options > WooCommerce > Product images) or upload all the images with the same proportions.

    Regards

    Avatar: Chris
    Chris
    Participant
    May 10, 2022 at 09:41

    Thank you for the information.

    I have one more question for the solution used. Fields of product photos are the same height, but when the photo is higher we have a problem with the label text moving below. Can you suggest what to change so that this does not happen?

    Example in the link. Thank you.

    https://prnt.sc/JeeqRmtS7pZx

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    May 10, 2022 at 14:48

    Hello,

    It’s because of styles that the third-party plugin adds for the div inside the image block.

    Try to add custom code below and check if that helps you:

    .product-content-image > div {
        position: static !important;
    }

    Regards

    Avatar: Chris
    Chris
    Participant
    May 10, 2022 at 15:03

    Yes, it works. Great. Thank you. I tried that, but something went wrong. It’s great now.

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    May 10, 2022 at 15:10

    Hello,

    You are welcome.

    Regards

  • Viewing 8 results - 1 through 8 (of 8 total)

The issue related to '‘How to set the dimension of the image field in the product list – part 2’' has been successfully resolved, and the topic is now closed for further responses

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.