Woocommerce Image product on mobile

[stephane2010]

Hi,
We did some customization on the product image on a product page to have a smooth and clean gallery because there is some problem with the default gallery. So the pictures are pretty good on desktop, but on mobile, I don’t know how to put simply the pictures in square format in full width. Actually, they’re half-cropped and have a height at the same size of the mobile screen. Do you have a solution for this ? You can see that at : https://www.fleurschailly.ch/produit/bouquet-de-roses-blanches/

Kind Regards,
Stéphane

[ruenel]

Hello Stéphane,

To make the images sqaure in smaller screens, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

@media(max-width: 767px){
  .single-product img.zoomImg {
    max-width: 100% !important;
    width: 100% !important;
  }



  .single-product .flex-viewport {
    max-width: 100%;
    max-height: 300px;
  }
}

We would love to know if this has worked for you. Thank you.

[stephane2010]

Hi !
Sorry, I didn’t saw your answer… It works better but there is still a problem with the image size. They don’t resize so it’s zoom inside the picture and not really nice. Do you have a solution for this ? I’ve tried some things but I don’t understand very well how it’s working, sorry.

Stéphane

[lely]

Hi Stéphane,

I have check and I can see the issue. The entire gallery on mobile or small screen is not responsive. It cannot be fixed by CSS alone because it will ruin the position of the image on the gallery. Even if we tried to hack it and add CSS to adjust image size, when you click the slide thumb below and it slide, you can see the position of the image is wrong. See what I mean here: https://screencast-o-matic.com/watch/cq6QoUu0EN

As much as we want to fixed this, unfortunately, this outside the scope of our support because it is a result of customization. You might want to consult a developer. Thank you for understanding.

[stephane2010]

Hi,
Ok, I understand.

Thank you !
Stéphane

[stephane2010]

So, I’ve removed all the custom CSS we put, add this code (found on an another topic)

.woocommerce .flex-control-nav.flex-control-thumbs {
position: relative;
width: 100%;
text-align: left;
padding-left: 0;
padding-right: 0;
}

And also change the size of the thumbnails with this code :

.flex-control-nav.flex-control-thumbs img {
height: 60px;
}

Now it’s ok

[Prasant]

Glad to hear that.