Some Customize Options for Product Page - by kmc

Dear @kmc,

We hope this message finds you well.

Please find below a screenshot of how the thumbnail appears on the desktop version: https://prnt.sc/zEJaacehkrBm.

Could you kindly confirm whether the thumbnail is square? If not, we may need to enforce specific height and width dimensions for thumbnail images on tablet screen sizes to ensure consistent display.

Thank you for your assistance.

Best regards,
The 8Theme Team

Dear @kmc,

We kindly suggest trying the following custom CSS code instead:

@media only screen and (min-width: 600px) and (max-width: 1024px) {
    .single-product .thumbnails-list li {
        min-height: 250px;
    }
    .single-product .woocommerce-product-gallery .thumbnails img {
        max-height: 250px;
        object-fit: cover !important;
    }
}

You may also refer to the following screenshot for reference:
https://prnt.sc/-vd5konYR3kU

Should you have any further questions or need additional assistance, please do not hesitate to reach out.

Best regards,
The 8Theme Team

Dear @kmc,

Could you kindly let us know which devices you are currently using for testing?

Thank you for your cooperation.

Best regards,
The 8Theme Team

Dear KMC,

Could you please provide us with the exact screen size? This information will help us update the custom CSS code accordingly.

You may refer to the screenshot via the following link:
https://prnt.sc/lVl-RoM14fRu

Thank you for your cooperation.

Best regards,
The 8Theme Team

Hi @kmc,

Please find the previous CSS code:

@media only screen and (min-width: 600px) and (max-width: 1024px) {
    .single-product .thumbnails-list li {
        min-height: 250px;
    }
    .single-product .woocommerce-product-gallery .thumbnails img {
        max-height: 250px;
        object-fit: cover !important;
    }
}

And change to this:

@media only screen and (min-width: 600px) and (max-width: 1024px) {
    .single-product .thumbnails-list li {
        min-height: 250px;
    }
    .single-product .woocommerce-product-gallery .thumbnails img {
        max-height: 250px !important;
        object-fit: cover !important;
    }
}

Hope it helps!