How can I fix inconsistent product image sizes after a theme update?

Store Design
,
1

HI! I recently updated my theme, and when I did this it changed all my product image sizes. Now all of my product photos are showing up at different heights.

Here is a sample product where you can see the different sizes of the photos: https://www.oneblushingbride.net/products/patience-fingertip-wedding-veil-with-lace-trim-in-white-off-white-or-ivory

Is there something I Can do to fix this (other than changing all my image sizes)? Thanks for your help!

Best,

Alisha

2

Adding the following line to your CSS file should fix your issue:

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

Please follow my Twitter account https://twitter.com/VoxfaOfficial to stay up-to-date with my Shopify tips or visit the Shopify section of my website https://voxfa.com/category/shopify/.

Also please reach out if you need help with the implementation.

Thank you.

3

thank you for taking the time to respond! Which css file should I add this to? Would it be under “assets”?

4

I can’t tell you without knowing the list of your CSS files. Anyone of them should do it. But it is better to put it in a custom CSS file. CSS files should be under assets folder.

5

Hi @Alisha_Jemelian

This is Victor from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

Online Store ->Theme ->Edit code

Assets ->Base.css

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

Hope you find my answer helpful!

Best regards,

Victor | PageFly

1 Like
6

thank you for your help! Below is the screenshot of where I inserted it but it still doesn’t work. Any other ideas?

I appreciate it!

Screenshot 2023-04-23 at 3.24.23 PM.png
Screenshot 2023-04-23 at 3.24.23 PM.png3400Ă—1934 714 KB

7

thank you for your help! Below is the screenshot of where I inserted it but in the theme editor but it still doesn’t work. Any other ideas?

I appreciate it!

Screenshot 2023-04-23 at 3.17.16 PM.png
Screenshot 2023-04-23 at 3.17.16 PM.png714Ă—2056 77.3 KB

8

@Alisha_Jemelian ,

Where did you end up adding that CSS? I am not seeing it in base.CSS I am seeing it being printed on the webpage but it is being precede by a wrong selector:

#shopify-section-template--16702387781883__main .card__media .media img{
object-fit: cover !important;
}

Correct one is:

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

Do you have any files ending in .scss.liquid or .css.liquid under assets directory? Would you please make a list of file names under assets directory?

Thanks

9

Please follow this instructions to add custom CSS to Shopify (Global not in a specific page). And add the following:

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