RE: Product Carousel Images Squished and/or distorted

This topic has 5 replies, 3 voices, and was last updated 10 months, 1 weeks ago ago by Andrew Mitchell

  • Avatar: macamrstudios
    macamrstudios
    Participant
    February 15, 2024 at 19:31

    When viewing pages such as (https://vernegallery.com/artists/hasui-kawase/) on a mobile device, the product images in the carousel at the bottom are only being resized by their width but not proportionately in height, causing the images to look smooshed. I am attaching a screenshot taken from my iPhone 14 Maxpro as a reference.
    example of squished image

    Please, contact administrator
    for this information.
    4 Answers
    Avatar: Justin
    Luca Rossi
    Support staff
    February 16, 2024 at 10:48

    Dear Macamr Studios,

    We hope this message finds you well.

    We are reaching out to seek clarification on a matter concerning the display of product images on our platform. We have observed some inconsistencies and would greatly appreciate your expertise in identifying the issues at hand.

    For your reference, please find below the links to the screenshots that illustrate how the product images are currently appearing on our end:

    – [Screenshot 1](https://prnt.sc/PkQ28TT2Il6R)
    – [Screenshot 2](https://prnt.sc/DapWmJ4iX6Wj)

    We would be grateful if you could provide us with a detailed explanation of the potential causes of these discrepancies and any recommended solutions.

    Thank you for your attention to this matter. We look forward to your prompt response.

    Best Regards,
    The 8Theme Team

    Avatar: macamrstudios
    macamrstudios
    Participant
    February 16, 2024 at 15:21

    Hi – I am not sure what device you pulled these images from, as yes, those are correct. I am attaching a new set of the same image so you can see how it looks on a desktop browser window (resized to ‘mobile’) versus how it displays on an actual mobile device. You will see that it appears the image is being forced into a square (300×300) format versus the 300 wide by whatever proportional height. Thus rendering the image to look squished.

    filename: correct proportions was taken from desktop running chrome with the window sized down to mobile width. This is how the image should display.

    filename: incorrect proportions was taken from an iPhone 14 Pro Max running chrome

    Files is visible for topic creator and
    support staff only.
    Avatar: Justin
    Luca Rossi
    Support staff
    February 16, 2024 at 16:54

    Dear @macamrstudios,

    We are pleased to inform you that we have successfully implemented the following custom CSS code within the “Theme Options > Theme Custom CSS > Mobile” section of your website:

    
    .content-product .product-content-image img {
        height: auto !important;
        width: auto !important;
    }
    .swiper-wrapper {
        align-items: center;
    }
    

    As a result of this update, the product images should now be displayed correctly on mobile devices. We kindly request that you review the changes at your earliest convenience to ensure that everything appears as expected.

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

    Warm regards,
    The 8Theme Team

    Avatar: Andrew Mitchell
    Andrew Mitchell
    Support staff
    February 16, 2024 at 17:38

    Dear macamrstudios,

    As we continue our mission to exceed expectations, your insights become increasingly valuable. Could we, with all due respect, request your thoughtful feedback by giving our theme a deserved 5-star rating on ThemeForest?

    Click here to share your valuable perspective: https://themeforest.net/downloads

    Your time and trust are highly appreciated!

    Best Regards,
    The 8Theme Team

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

The issue related to '‘RE: Product Carousel Images Squished and/or distorted’' 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.