Some Customize Options for Product Page - by kmc

This topic has 39 replies, 2 voices, and was last updated 2 months ago ago by Luca Rossi

  • Avatar: Justin
    Luca Rossi
    Support staff
    September 11, 2025 at 09:21

    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

    Avatar: kmc
    kmc
    Participant
    September 11, 2025 at 11:41

    I am referring to this pad view, where between each image there is a big gap. This is not right.

    Please contact administrator
    for this information.
    Avatar: Justin
    Luca Rossi
    Support staff
    September 12, 2025 at 06:17

    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

    Avatar: kmc
    kmc
    Participant
    September 12, 2025 at 10:34

    It’s not working,

    1) the image is not full width
    2) the thumbnail is not square.

    Files is visible for topic creator and
    support staff only.
    Avatar: Justin
    Luca Rossi
    Support staff
    September 14, 2025 at 15:11

    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

    Avatar: kmc
    kmc
    Participant
    September 14, 2025 at 16:40

    I am just previewing the pad view by adjusting the size of the windows on desktop.

    Avatar: Justin
    Luca Rossi
    Support staff
    September 15, 2025 at 07:41

    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

    Avatar: kmc
    kmc
    Participant
    October 5, 2025 at 05:15

    600 ~ 1024 all have this issue where the slider is not displaying in square size, only mobile phone view is in square, anything larger than iphone and up to pad view (1024px) are all not correct, you can try to scale the window size to check.

    Files is visible for topic creator and
    support staff only.
    Avatar: Justin
    Luca Rossi
    Support staff
    October 5, 2025 at 15:45

    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!

  • 1 2
    Viewing 39 results - 31 through 39 (of 39 total)

You must be logged in to reply to this topic.Log in/Sign up

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