Re: Product Grid images are being cropped

Solved

Why are my product grid images being cropped in the Ride theme?

MarketingAux
New Member
19 0 0

Hello, The image preview in the product grid is being cut, the picture should be 1080*1080 but here it shows less width which make it cropped from the sides,I have the "Ride" Theme, 

please help. Thank You

 https://961sneakers.com/collections/sneakers

Pass : (12345678)

Accepted Solution (1)
Uhrick
Shopify Partner
433 68 99

This is an accepted solution.

This is how your code looks starting on line 2956:

 

 .localization-form__select:focus {
   outline: transparent solid 1px;
 }
.card__media .media img{
object-fit: contain !important;
}
.product-grid-container .card__media .media img {object-fit: fill !important;}
}

 

It should look like this to show the whole image without extending it:

 

 .localization-form__select:focus {
   outline: transparent solid 1px;
 }

 .product-grid-container .card__media .media img{
   object-fit: contain !important;
 }

}

 

 

Shopify Developer
Hire me for theme customizations at ricardomsilvestre@outlook.com or Upwork
Was my answer helpful to you? Please like or mark as solution

View solution in original post

Replies 20 (20)

PageFly-Victor
Shopify Partner
7865 1785 3075

Hi @MarketingAux .

 

This is PageFly - Advanced Page Builder.

 

You can go to Online store => themes => actions => edit code  and add this code on file base.css

.card__media .media img{
object-fit: contain !important;
}


Hope this helps.

Best Regards;

Pagefly

 

MarketingAux
New Member
19 0 0

Didn't work

 

MarketingAux
New Member
19 0 0

How can I decrease the height of the product card so the image will show as full?

 

 

Derek_Bradley
Tourist
10 0 0

This works perfectly, thanks!

ndo
Visitor
2 0 0

Worked. Thanks

gr_trading
Shopify Partner
1828 145 191

Hi @MarketingAux ,

 

Shopify crop image uploaded to system dynamically by their code proportionally. Since image uploaded by you is proper square 1080 and product card is not proper square, card has hide extra portion.

 

If you want to show image completely. Please add below CSS in base.css

 

.product-grid-container .card__media .media img{object-fit:fill !important}

 

 

For any custom development WhatsApp or connect at Email ID: gr.trading15@gmail.com for quick consultation. | Shopify Free codes
To support Buy Me a Coffee
MarketingAux
New Member
19 0 0

still didn't work

 

Uhrick
Shopify Partner
433 68 99

hey, MarketingAux, good evening

Can you show how you have added the snippet in the base.css? Send a screenshot if possible for us to see if everything is properly placed?

Shopify Developer
Hire me for theme customizations at ricardomsilvestre@outlook.com or Upwork
Was my answer helpful to you? Please like or mark as solution
Uhrick
Shopify Partner
433 68 99

I have no access, can you set it so that anyone with the link can see it?

Shopify Developer
Hire me for theme customizations at ricardomsilvestre@outlook.com or Upwork
Was my answer helpful to you? Please like or mark as solution
MarketingAux
New Member
19 0 0

gave you access

@Uhrick 

gr_trading
Shopify Partner
1828 145 191

Hi @MarketingAux ,

 

Please place below css at very end of your base.css

.product-grid-container .card__media .media img{object-fit:fill !important}

at line no 2964

For any custom development WhatsApp or connect at Email ID: gr.trading15@gmail.com for quick consultation. | Shopify Free codes
To support Buy Me a Coffee
MarketingAux
New Member
19 0 0

@gr_trading it worked but now images are extended in height 

 

 

Uhrick
Shopify Partner
433 68 99

This is an accepted solution.

This is how your code looks starting on line 2956:

 

 .localization-form__select:focus {
   outline: transparent solid 1px;
 }
.card__media .media img{
object-fit: contain !important;
}
.product-grid-container .card__media .media img {object-fit: fill !important;}
}

 

It should look like this to show the whole image without extending it:

 

 .localization-form__select:focus {
   outline: transparent solid 1px;
 }

 .product-grid-container .card__media .media img{
   object-fit: contain !important;
 }

}

 

 

Shopify Developer
Hire me for theme customizations at ricardomsilvestre@outlook.com or Upwork
Was my answer helpful to you? Please like or mark as solution
MarketingAux
New Member
19 0 0

@Uhrick  Thank you very much it really worked, but how can i make the hero in the homepage excluded from this code and show image as "cover" 

 

Uhrick
Shopify Partner
433 68 99

hey, this specific code won't affect the hero. Its selector is for the images of the product card only

Shopify Developer
Hire me for theme customizations at ricardomsilvestre@outlook.com or Upwork
Was my answer helpful to you? Please like or mark as solution
aelitzer
Tourist
35 0 2

I'm running into this same issue with Craft, but it appears to be distorting my images.

Screen Shot 2023-01-17 at 5.18.13 PM.png

When I remove the additional code you suggested above, the distortion is avoided, but the cropped appearance returns.

Screen Shot 2023-01-17 at 5.20.07 PM.png

 

Any advice?

Uhrick
Shopify Partner
433 68 99

wow, sorry. I didn't see this. I hope you have solved the problem. If not, send the link here so that I can check

Shopify Developer
Hire me for theme customizations at ricardomsilvestre@outlook.com or Upwork
Was my answer helpful to you? Please like or mark as solution
ndo
Visitor
2 0 0

Where exactly is this code to replace in the code editor?

Uhrick
Shopify Partner
433 68 99

hi Ndo, it's been some time, but I believe it was in the base.css file

Shopify Developer
Hire me for theme customizations at ricardomsilvestre@outlook.com or Upwork
Was my answer helpful to you? Please like or mark as solution