Thubnail Image Resize - Venture Theme

Solved
IbbeDesign
Tourist
18 0 3

Guys, would you be able to help me and give me advice on how to change the size of the pictures or the text below the picture on the collection site, that the text doesn't cover the images like it is now? We would prefer if the whole item is visible.

 

Thank you very much in advance for any tips!

 

Lucie

Screenshot_3.png

0 Likes
paramSoft
Shopify Partner
1560 246 705

Please provide website url and if your store is password protected then also provide password

Want to customize Shopify storefront? Check the PageFly app
75,000+ Active Shopify merchants. TOP5 best Shopify Apps.

Contact Me On : parambabla.soft@gmail.com
0 Likes
IbbeDesign
Tourist
18 0 3
www.ibbedesign.com - It is without password
0 Likes
paramSoft
Shopify Partner
1560 246 705

Please place this code at the end of theme.scss

.boost-pfs-filter-products {
display: flex;
    flex-wrap: wrap;
}
.boost-pfs-filter-products .product-card__info {
font-size: 15px;
}
.product-card__image img {
object-fit: contain;
}
@media only screen and (min-width: 750px) {
.boost-pfs-filter-products .grid__item {
width: 25%;
    -ms-flex-preferred-size: 25%;
    -webkit-flex-basis: 25%;
    -moz-flex-basis: 25%;
    flex-basis: 25%;
}
}
Want to customize Shopify storefront? Check the PageFly app
75,000+ Active Shopify merchants. TOP5 best Shopify Apps.

Contact Me On : parambabla.soft@gmail.com
IbbeDesign
Tourist
18 0 3

Thank you very much!!!

 

It works for some pages but the same are still like that:

https://ibbedesign.com/collections/display-cabinets

https://ibbedesign.com/collections/artificial-plants-flowers

 

Is there any way to fix it?

0 Likes
paramSoft
Shopify Partner
1560 246 705

Please explain more with screenshots.

Want to customize Shopify storefront? Check the PageFly app
75,000+ Active Shopify merchants. TOP5 best Shopify Apps.

Contact Me On : parambabla.soft@gmail.com
0 Likes
IbbeDesign
Tourist
18 0 3

If you check these links: 

https://ibbedesign.com/collections/display-cabinets

https://ibbedesign.com/collections/artificial-plants-flowers

then it is visible that the text is still covering the image. I was trying to change the text size in your code which helped a bit. It seems the coverage depends on how long and big the text is. The best would be if the text would have a fixed position under the picture and that's it

 

Thank you very much for your answers!

 

Lucie

 

0 Likes
paramSoft
Shopify Partner
1560 246 705

This is an accepted solution.

Please also place this code. Please do not remove my old code.

.product-card .product-card__image-container {
margin-bottom: 0px;
}
.product-card__info {
position: relative;
}
.product-card .product-card__image-container .product-card__image {
    max-width: 100% !important;
    min-height: 432px;
}
Want to customize Shopify storefront? Check the PageFly app
75,000+ Active Shopify merchants. TOP5 best Shopify Apps.

Contact Me On : parambabla.soft@gmail.com
0 Likes
IbbeDesign
Tourist
18 0 3

Now it works! Amazing!!! Thank you very much, really appreciated!

0 Likes
IbbeDesign
Tourist
18 0 3

One more thing - the product thumbnails have different sizes - is it possible to fix it somehow that all the pictures have a fixed size?

Thank you very much in advance for your effort

Lucie

0 Likes