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

Solved

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

Lexi123
Tourist
7 0 2

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?

Accepted Solution (1)

BSSCommerce-HDL
Shopify Partner
1094 373 445

This is an 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: 

BSSTechVenture_0-1717052852614.png

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 😍

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


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 4 (4)

Moeed
Shopify Partner
4361 1123 1380

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:

Moeed_0-1717052842303.png

 

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

 

Best Regards,
Moeed

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
Lexi123
Tourist
7 0 2

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

BSSCommerce-HDL
Shopify Partner
1094 373 445

This is an 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: 

BSSTechVenture_0-1717052852614.png

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 😍

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


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
Lexi123
Tourist
7 0 2

Thank you❤️