Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1329491

    Hi, in my shop http://www.toyasanarchy.com, when trying to buy the viewing the product https://www.toysanarchy.com/product/tenebris/ from mobile I find deformed images, both on iphone (you can see it here: https://www.toysanarchy.com/wp-content/uploads/2021/11/tenebris-iphone.jpg) and on android, (you can see it here https://www.toysanarchy.com/wp-content/uploads/2021/11/tenebris-android.jpg :) can you help me please? thanks gianluca

    #1329591

    Hey sitibus,

    Thank you for the inquiry.

    Looks like you are using a third party plugin to display a 360 version of the product image. We are not able to reproduce the issue on a browser device emulation as shown in the screenshot below, but you might be able to prevent the image from stretching by applying a maximum height to it.

    #main #container.wc360-container {
        width: 100%;
        max-height: 300px;
    }
    

    This is how the product page looks on our end. https://imgur.com/NRJ8DUN

    Best regards,
    Ismael

    #1330101

    Thanks but that’s not what I want. I would like to have the image as wide as the screen of the mobile phone is not possible? And why is there a magnifying glass, can it be removed? Thanks Gianluca

    #1330209

    Hi,

    Thank you for the update.

    You can use this css to adjust the width of the main image container, which should also increase the width of the 360 image.

    #top.single-product .single-product-main-image {
        width: 100%;
    }
    

    Make sure to place the code inside one of the css media queries for mobile view.

    Best regards,
    Ismael

    #1330296

    I tried with 90% and the result is almost ok,
    but the lower part of the image is cut can you help me?

    #1330422

    Hi,

    Thank you for the info.

    The rest of the image is not visible because of this css code.

    #main #container.wc360-container {
        width: 100%;
        max-height: 300px;
    }

    You have to remove the max-height property and make sure to place the code inside a css media query.

    Example:

    @media only screen and (max-width: 767px) {
      /* Add your Mobile Styles here */
    
    }

    Best regards,
    Ismael

    #1330431

    I did:
    media only screen and (max-width: 767px) {
    /* Add your Mobile Styles here */
    #main #container.wc360-container {
    width: 100%;
    }
    #top.single-product .single-product-main-image {
    width: 100%;
    }
    }

    Now with android it’s all ok while with iPhone is strecthed vertically. What couldd I do?

    #1330482

    Hi,

    You might have to define the maximum height of the 360 container again, but only for mobile view. Look for this code.

    #main #container.wc360-container {
        width: 100%;
    }
    

    And replace it with:

    #main #container.wc360-container {
        width: 100%;
        max-height: 400px;
    }
    

    Adjust the max-height value as necessary.

    Best regards,
    Ismael

    #1330574

    Hi, I tride this:

    @media only screen and (max-width: 767px) {
    /* Add your Mobile Styles here */
    #main #container.wc360-container {
    width: 100%;
    max-height: 460px;
    }
    #top.single-product .single-product-main-image {
    width: 100%;
    height: 100%;
    }
    }

    On android mobiles runs fine but on iOS is still strecthed vertically. Any idea?

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.