Product Grid images are being cropped

Solved
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)

Accepted Solutions
Uhrick
Shopify Partner
261 50 59

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 15 (15)
PageFly-Victor
Shopify Partner
6998 1458 2699

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

 

Please let me know if it works by giving it a like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7. 


Let’s create a unique website design with PageFly for free now! 

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?

 

 

hari1_prasad
Shopify Partner
389 54 54

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}

 

 

If your problem solved then Like & Accept this Solution.
For Design, Development and custom changes Hire Me or drop me a message or connect at Email ID: gr.trading15@gmail.com for quick consultation.
To support Buy Me a Coffee
MarketingAux
New Member
19 0 0

still didn't work

 

Uhrick
Shopify Partner
261 50 59

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
261 50 59

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 

hari1_prasad
Shopify Partner
389 54 54

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

If your problem solved then Like & Accept this Solution.
For Design, Development and custom changes Hire Me or drop me a message or connect at Email ID: gr.trading15@gmail.com for quick consultation.
To support Buy Me a Coffee
MarketingAux
New Member
19 0 0

@hari1_prasad it worked but now images are extended in height 

 

 

Uhrick
Shopify Partner
261 50 59

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
261 50 59

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?