Single product image stretched in big screen

[altious]

Hello

If you take a look at
https://www.mionix.co.id/product/naos-3200/

It looks fine in normal screen but when I open it in 30 inch monitor it stretched the image

how can I fix this???

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Hi,

This is meant to happen as it’s using the full width split layout.

Are you looking to limit the image width?

Thanks.

[altious]

is it possible to limit the stretching?

[altious]

this also includes my logo stretching in IPAD or tablet

[micheal_w]

Hi David,
I have the same issue, the product image stretches on full width split layout.
Checking your demo page it seems that your image does not stretch http://uplift.swiftideas.com/product/new-standard-jeans/

So how to get rid of the stretchiness?
Thanks!

[David Martin – Support]

This is the image we use on the demo: http://uplift.swiftideas.com/wp-content/uploads/2016/02/uplift-products-jeans1a.jpg

The size is large, 1200w x 1356h so it scales very well.

@altious Here your image is too small, it’s only 500 x 514 and needs to be bigger. https://www.mionix.co.id/product/naos-3200/

@micheal_w – what is your product URL?

Thanks,
David.

[micheal_w]

This reply has been marked as private.

[David Martin – Support]

Hi,

As you are using the slider within the fullwidth area it is harder to get an exact fit. This should help you do this:

@media only screen and (min-width: 768px) {
.woocommerce.product-fw-split div.product div.images {
    width: 57%;
}
}
.product-fw-split #product-img-slider .lSSlideOuter.vertical {
    padding-right: 0!important;
    padding-left: 100px;
}
.product-fw-split #product-img-slider {
    padding: 0;
}

[altious]

Hi David

I resize my image because it can’t fit so If I use this image 1200w x 1356h it will not stretch?
also even my logo is stretched in Tablet

Another problem I set the image in woocommerce with different measurements and regenerate thumbnail clear my cache and image will appear the same… can you tell me why?

[David Martin – Support]

The image will be large are the resolution on big screens will be improved yes.

It depends where in the theme you refer to, can you screenshot which image you mean? Some sizes are generated dynamically.

Thanks.

[altious]

My logo is stretched in Tablet
how do I fix that?

[David Martin – Support]

Please add this to Theme Options => Custom CSS

@media only screen and (-webkit-min-device-pixel-ratio: 2), not all, not all, not all, only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
#logo img.retina, 
#mobile-logo img.retina {
    width: inherit!important;
}
}

[altious]

Hi it works! can you give me code to make product image not stretched as well?

[Kyle – SUPPORT]

In Theme Options > WooCommerce > Shop Options override the product image width, make it smaller

– Kyle