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

Store Design
1

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
2

Hello There,

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

1 Like
3

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
4

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

Mobile:

ECC1_0-1625730295107.png
ECC1_0-1625730295107.png483×547 50.8 KB

But in Tabs

ECC1_1-1625730326034.png
ECC1_1-1625730326034.png967×516 78.7 KB

Again in medium desktops, its okay

ECC1_2-1625730381906.png
ECC1_2-1625730381906.png1019×583 59.6 KB

But in big devices It will cropped.

1 Like
5

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
6

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
7

If helpful then please Like and Accept as Solution

1 Like
8

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
9

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