Product Specific Cropping?

Is it possible to have product-specific cropping? I sell photographic prints & calendars on my store and my portrait prints/calendars are very small, especially on mobile. Is there any magical CSS code that can change the crop on portrait thumbnails on the product page for mobile especially?

https://www.peterotoole.ie

Thanks as always!

Hi,

Can you share link to this product?

13 minutes ago, tuanphan said:

Hi,

Can you share link to this product?

Hi there, so this would be one of the of the many portrait products https://www.peterotoole.ie/shop/cork/p/12-pubs-of-cork-calendar-2024

It's just important that whatever crop is applied to portrait products that is doesn't affect the landscape products.

Thanks so much!

You can edit Product > Additional Info > Add a Code Block > Paste this code

<style>
  @media screen and (max-width:767px) {
  .tweak-product-basic-item-gallery-aspect-ratio-11-square .ProductItem-gallery-slides:before {
    padding-bottom: 150% !important;
}
  }
</style>

If it works, I will give rule for other products

4 hours ago, tuanphan said:

You can edit Product > Additional Info > Add a Code Block > Paste this code

<style>
  @media screen and (max-width:767px) {
  .tweak-product-basic-item-gallery-aspect-ratio-11-square .ProductItem-gallery-slides:before {
    padding-bottom: 150% !important;
}
  }
</style>

If it works, I will give rule for other products

Hi there, tried that but it doesn't work i'm afraid 😞

On 10/15/2023 at 5:46 PM, niteshifte said:

Hi there, tried that but it doesn't work i'm afraid 😞

Can you add & keep Code Block? I can check it again easier

sorry i accidentally marked it as the solution! When i leave the code there, it's visible to customers as you can see below. Maybe i'm doing something wrong if it's visible?

On 10/19/2023 at 12:04 AM, niteshifte said:

sorry i accidentally marked it as the solution! When i leave the code there, it's visible to customers as you can see below. Maybe i'm doing something wrong if it's visible?

There is an option Show code or something similar above Code Block message box, you uncheck that option, If you can't find that option, can you take a screenshot of your Code Block? I can guide you easier

23 hours ago, tuanphan said:

There is an option Show code or something similar above Code Block message box, you uncheck that option, If you can't find that option, can you take a screenshot of your Code Block? I can guide you easier

I actually realised I was pasting the code and changing the type to CSS. when I left it as HTML it works! Thanks so much!