Image product appereance

Hello,

Thank you for reaching out to us.

Please note that the ratio you select in Customizer > WooCommerce > Product Images > Thumbnail cropping option will be used for all the screens.

If you want to change the height for mobile devices, you’ll need to add custom CSS code like this:

@media screen and (max-width: 768px) {
  .woocommerce ul.products li.product a img {
    height: 500px;
    object-fit: cover;
  }
}

However, this can make the images looked stretched as the actual thumbnail size height is smaller. You can change the height value depending on your preference. After saving changes, make sure to purge the cache so it’ll take effect on your pages right away.

Regards,
Karla

Thank you very much, It worked. Could you be so kind to help me with this: I need to put this text circled in yellow in a justify format https://snipboard.io/mqgFzl.jpg like the ones shown here: https://snipboard.io/c9OCfk.jpg , also, how to put the text of the button “Comprar ahora” in just one line ?

• This reply was modified 3 years, 4 months ago by freddyee.

Hey,
Can you link to the page where this is not happening?

Thanks,
Hannah

This is the page where I need the justify format and one line “Comprar ahora” button https://www.runayaq.com/tienda-de-ropa-peruana/
The page where is fine is https://www.runayaq.com/

• This reply was modified 3 years, 4 months ago by freddyee.

Hey,
Try adding this to your custom css:

@media (max-width 992px) {
.product-details.content-bg.entry-content-wrap {
    text-align: center;
}
}

Hope that helps!

Best,
Hannah

Hi

I just realized a problem when I put the code @karlalevelup gave

@media screen and (max-width: 768px) {
  .woocommerce ul.products li.product a img {
    height: 500px;
    object-fit: cover;
  }
}

The image size in PC view changed:
The thumbnail width was 300 and automatically went to 0 with that code.
https://snipboard.io/ZlhTig.jpg
This is the page: https://www.runayaq.com/tienda-de-ropa-peruana/

What can I do ?

• This reply was modified 3 years, 4 months ago by freddyee.
• This reply was modified 3 years, 4 months ago by freddyee.
• This reply was modified 3 years, 4 months ago by freddyee.

Hello @freddyee,

The CSS code will only take effect on the actual pages and screen widths 768px and below. Additionally, a CSS code will not change the value of the WooCommerce Product Images options.

Just to confirm, is there anyone else working on your website that might have changed that option’s value? If the Thumbnail width option’s value was 300 before, you can set it at that again and publish the changes in your Customizer.

Regards,
Karla

I’m the only one working on this right now.
I just notice that when I put 300 in thumbnail with, publish it, the preview goes like this : https://snipboard.io/mlJ4tb.jpg but after refreshing the page, it continue like this https://snipboard.io/ZlhTig.jpg
After refreshing the page the value goes back to 0. What could be the problem ?

• This reply was modified 3 years, 4 months ago by freddyee.
• This reply was modified 3 years, 4 months ago by freddyee.

Hey @freddyee,
Are you having issues with anything else saving your site? Or is this the only thing? What caching plugin are you using?

Kindly,
Hannah

my cache plugin is Litespeed cache, but I deactivated that plugin while trying to fix that problem.

I changed this from with box to witout box and I had no problem https://snipboard.io/IgmVne.jpg

I’m not seeing Karla’s css in your css. Where are you adding that?

Hannah

I erased the css , because I thought that was causing the problem, but that problem remains.

I’m gonna put Karla’s code again when fixing this issue, or do you need me to put it now ?

• This reply was modified 3 years, 4 months ago by freddyee.

I added the code again.

is there a solution for the problem I described ?

Hi,
Try setting the “Cut out the thumbnail” to custom or else 1:1. Does that make a difference?

Kindly,
Hannah

It doesn’t make any difference, for whatever option I set, it goes back be with no marks and the width goes back to 0 :
https://snipboard.io/VpLoMv.jpg