How can I make the photos on my home page square without cropping them?

[Lexi123]

Hello,

I saw previous posts with the following code which worked perfectly for my product page:

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

I need it to also work for the "trending collection" section on my home page. Unfortunately I couldn't find another code that could fix the issue. 

Could someone please help?

[Moeed]

Hey @Lexi123 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag.

<style>
.card .media img {
    object-fit: fill !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Lexi123]

That was the wrong section but thank you for your input 😊

[BSSCommerce-HDL · Accepted solution]

Hi @Lexi123, 

You can try this code by following these steps:

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code
Step 2: Search file base.css, theme.css, styles.css or theme.scss.liquid

Step 3: Insert the below code at the bottom of the file -> Save 

.home-page-tab.collection .card__media .media img {
  object-fit: contain !important;
}

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[Lexi123]

Thank you❤️