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

Solved
Avogt9
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
ChoosiZon
Navigator
270 45 76

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
Avogt9
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
ChoosiZon
Navigator
270 45 76

Hi,

Could you attach pics for better understanding?

0 Likes
Avogt9
New Member
4 0 0

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

0 Likes
ChoosiZon
Navigator
270 45 76

This is an accepted solution.

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.

Avogt9
New Member
4 0 0

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

0 Likes
CollegeWares
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
ChoosiZon
Navigator
270 45 76

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; }
}
rockysticksxo
New Member
1 0 0

In Venture, how did you change the columns from five to four?

0 Likes