deformed images

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

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

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

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

Hi,
When I check in Windows Chrome DevTools, the .current-image has a height of 95vh breaking out of the .wc360-container Please see the screenshot in the Private Content area.
In this screenshot you will see the image (blue area) goes behind the title and the bottom of the image is hidden, so this is the “OK” Android view, in Safari DevTools on a Mac the same 95vh stretchs the image even more. In my test changing the 95vh to 480px corrected this for both, so please try this css:

@media only screen and (max-width: 767px) {
#wrap_all #main .threesixty .threesixty_images img.current-image {
    max-height: 480px!important;
}
}

After applying the css, please clear your browser cache and check.
Please note that testing with iPads & iPhones can be hard to clear the cache, often you need to also clear the history to fully purge the cache, following these steps for Safari and note Step 4 where you will Clear the History.

Best regards,
Mike

Hi,
Glad to hear, for the button try this css:

@media only screen and (max-width: 767px) { 
#top.single-product form.cart {
    margin-top: 20px;
}
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike