How to fix image cropping issue on Konversion theme collection page?

Hello
I have Konversion theme installed in my shopify site.
But the problem is with the collection page. The collection image is not seems okay. I have tried many devices but the image is cropped or sometimes very small.
I know about the column and row functionality of the theme.
I mean,
On Mobile Its okay, Slightly bigger screen on tab Its cropped, Again in mini laptops its okay, But in big screens its again cropped.
Whats the problem. Which part of setting or code we need to change to fix it.

We need a urgent solution.
Thank you

1 Like

Hello There,

Please share your store URL and Screenshot.
So that I will check and let you know the exact solution here.

1 Like

hello @ECC1

Please share your store URL and Screenshot of the section. So that I will check and let you know the exact solution here.

1 Like

Page Link: https://apolloprosports.com/collections/genius-pro-stunt-trick-scooter-for-adults-and-kids

Mobile:

But in Tabs

Again in medium desktops, its okay

But in big devices It will cropped.

1 Like

hello @ECC1

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

.template-collection .grid .grid__item  .product-card .product-card__image {
    height: 100% !important;
}
1 Like

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >theme.scss.css and paste this at the bottom of the file:
@media screen and (max-width: 1024px){
.product-card .product-card__image {
height: 45vw !important;
}
}
@media screen and (max-width: 575px){
.product-card .product-card__image {
height: 50vw !important;
}
}
@media screen and (max-width: 480px){
.product-card .product-card__image {
height: 55vw !important;
}
}
@media screen and (max-width: 400px){
.product-card .product-card__image {
height: 62vw !important;
}
}
1 Like

If helpful then please Like and Accept as Solution

1 Like

Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance.

1 Like

Hey there @ECC1 !

Don here from Shopify.

Thanks for sharing your query with us here in the Shopify Community and it’s great to see our fellow Community members have been able to chip in here already with suggestions!

It’s always a good idea to make a duplicate copy of your theme before trying out any coding changes, just so you have a safe version to revert to.

How you’d be able to get support for a given theme will depend on from who this theme was acquired.

For the free Shopify themes in our theme store, we’d be able to provide support for these ourselves at Shopify, whereas paid themes are supported by their developers.

Are you still working towards launching your store or are you selling already?

Could you tell us a bit more about how you’re looking to market your store and who you’re looking to reach out to?

Check out this example of a skate store in Ottawa that found success using Shopify for their business.

Regards,

Don

1 Like