Product Image Cropping on Brooklyn Theme (Mobile)

Solved
Highlighted
New Member
7 0 0

Hello. I have recently switched my store to the Brooklyn theme; the product images on mobile are cropped from the top and the bottom. All of them are uniformly 640 x 640 px, and this problem does not occur on the desktop version of the site.

 

I cannot find any previous documentation on this issue. Is there a way to stop the images on mobile from cropping? The recommended resolution appears to be square, which is what the images already are.

0 Likes
Shopify Expert
665 170 201

Hi, @tenchairs ,

This is Evita from On The Map

 

Can you add your store URL?

 

Best,
Evita

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes
Highlighted
New Member
7 0 0

The URL of the product page on which this is obvious is: https://lighthousepup.com/products/led-safety-dog-collar-usb-rechargeable-light-up-pet-collar-adjust...

 

The 9th and 10th images demonstrate this. The bottom of the added image is cropped out.

0 Likes
Highlighted

Success.

Shopify Expert
665 170 201

Add this code to Assets/theme.scss.liquid file:

.slick-slide img {
    margin-top: -1rem;
}
On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
1 Like