I want to increase the size of the Venture theme collection images.

Solved
Highlighted
New Member
4 0 0

In the Venture theme, I figured out how to change the code so that the product collection pages show four columns of products instead of five. However the product images remained the same size. How can I change the code so that the images are larger to fill up the space better? 

My store URL is:

ripple1992.com

0 Likes
Highlighted
Trailblazer
192 33 46

Hi,

You can put this line at the bottom of theme.scss file :

.product-card__image { max-width:none !important; }

There are other ways to make it even bigger if you want.

0 Likes
Highlighted
New Member
4 0 0
Hey thanks for the response! While that did make the images bigger, unfortunately it moved the product descriptions around as well, instead of keeping them on the clean aligned grid. I attached a before and after pic
0 Likes
Highlighted
Trailblazer
192 33 46

Hi,

Could you attach pics for better understanding?

0 Likes
Highlighted
New Member
4 0 0

heres a before and afterScreen Shot 2020-04-10 at 12.05.38 PM.jpg

0 Likes
Highlighted

Success.

Trailblazer
192 33 46

Hi,

You can put this  at the bottom of theme.scss file :

@media only screen and (min-width: 1350px) {
      .page-width  {
       max-width:1350px;
       }
      .product-card__image-container {
          height: 300px;
        }
       .product-card__image.js {
          max-width: 265px !important;
        }  
}

See if working.If not can tweak a bit.

1 Like
Highlighted
New Member
4 0 0

Wow, this worked. It worked great! Thank you so much for all your help!

0 Likes
Highlighted
Tourist
7 0 1

Hey Dayton,

 

I'm having a very similar issue with my site, collegewares.com. I've tried entering the code you had provided, but it didn't change anything. Do you have any suggestions?

0 Likes
Highlighted
Trailblazer
192 33 46

I'm having a very similar issue with my site, collegewares.com. I've tried entering the code you had provided, but it didn't change anything. Do you have any suggestions?

 

You can add this at the bottom of theme.scss file :

 

@media (min-width:900px) {
.product-card__image-wrapper { height:420px; }
}
1 Like