Increase product collection page images size for mobile - venture theme

Solved
Ellibelle
Excursionist
16 0 6

Hello,

Please could someone help me with increasing the size of my images on the collection page? 

I am using Venture theme.

ellibellejewellery.com

IMG_8764.PNGIMG_8765.PNG

KetanKumar
Shopify Partner
17332 1871 6473

@Ellibelle 

do you have like this?

KetanKumar_0-1618804947077.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Ellibelle
Excursionist
16 0 6

Yes exactly!

0 Likes
Natztech
Shopify Partner
669 183 442

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

 

 

@media screen and (max-width: 429px){
#shopify-section-featured-collections  .grid .grid__item .featured-card__image-container .featured-card__image-wrapper .featured-card__image{
    max-height: 100% !important;
    max-width: 100% !important;
}

#shopify-section-featured-collections  .grid .grid__item .featured-card__image-container {
    max-height: 100% !important;
    max-width: 100% !important;
}
#shopify-section-featured-collections  .grid .grid__item .featured-card{
  padding: 0 !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
0 Likes
Ellibelle
Excursionist
16 0 6

Thank you, but this did not work for mobile view only for desktop view and it just removed the padding between the collection images.

0 Likes
KetanKumar
Shopify Partner
17332 1871 6473

This is an accepted solution.

@Ellibelle thanks for confirming can you please add this code 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

@media only screen and (max-width: 749px) {
.featured-card {padding: 0;}
.featured-card--contain .featured-card__image-container  {max-width: 100% !important;max-height: 100% !important;}
.featured-card__image {max-height: 100% !important;}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Natztech
Shopify Partner
669 183 442

@Ellibelle  please remove last code and insert this code it works 

 

 

@media screen and (max-width: 749px){
#shopify-section-featured-collections .grid .grid__item .featured-card__image-container .featured-card__image-wrapper .featured-card__image{
max-height: 100% !important;
max-width: 100% !important;
}

#shopify-section-featured-collections .grid .grid__item .featured-card__image-container {
max-height: 100% !important;
max-width: 100% !important;
}
#shopify-section-featured-collections .grid .grid__item .featured-card{
padding: 0 !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
0 Likes
Ellibelle
Excursionist
16 0 6

Thank you! This has worked but I also wanted the product images to be larger?

Please could you help with this?

KetanKumar
Shopify Partner
17332 1871 6473

@Ellibelle 

thanks for update 

can you please share screenshot so i will give you proper code

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Ellibelle
Excursionist
16 0 6

See below - I would like to increase the size of my product images as they are very small.

vcv.png