Collection Page image cropping

Solved
ECC1
Excursionist
21 0 13

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

Pallavi
Shopify Expert
2239 370 486

Hello There,

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

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
Natztech
Shopify Partner
1443 404 961

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. 

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
ECC1
Excursionist
21 0 13

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

 

Mobile: 

ECC1_0-1625730295107.png

 

But in Tabs

ECC1_1-1625730326034.png

Again in medium desktops, its okay

ECC1_2-1625730381906.png

 

But in big devices It will cropped.

 

Natztech
Shopify Partner
1443 404 961

This is an accepted solution.

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;
}

 

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
Pallavi
Shopify Expert
2239 370 486

This is an accepted solution.

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;
}
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
Natztech
Shopify Partner
1443 404 961

If helpful then please Like and Accept as Solution

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
Pallavi
Shopify Expert
2239 370 486

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.

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
Don
Shopify Staff
Shopify Staff
1391 92 190

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

Don | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog