Solved

Resize Collection thumbnails. Minimal Theme.

CL1981
Tourist
4 0 1

Hi I'm using minimal theme. 

 

In my first collection I have five categories and I like the sizing of the category thumbnails. 

 

In my second collection I have two categories and the category thumbnails are way too large. Is there a way to make these thumbnails the same size as Category 1? 

 

Thanks! 

Accepted Solution (1)
DMT-Mike
Shopify Partner
25 6 9

This is an accepted solution.

Here's the best easy solution I can find.

 

Open your stores dashboard --> Online Store --> Actions --> Edit Code --> Open 'theme.scss.liquid' -->

At the bottom of the file copy and paste this code and your collection list images should be the size you want:

 

/* Collection List Image Size Change */

/* Desktop Size */

.one-half {
	width: 20% !important;
}

.one-quarter {
	width: 20% !important;
}

/* Smaller Screen Sizes */

@media only screen and (min-width: 481px) and (max-width: 768px) {
  .one-half {
    width: 33.333% !important;
  }
  .one-quarter {
    width: 33.333% !important;
  }
}

@media only screen and (max-width: 480px) {
  .one-half {
  	width: 50% !important;
  }
  .one-quarter {
  	width: 50% !important;
  }
}

 

Let me know if this works for you!

 

NOTE: If you edit any files on your store, I advise that you duplicate the theme before doing so and editing the duplicated theme instead. This will prevent your live site from breaking if something goes wrong.

Need expert help with your Shopify Website? Get in touch.

View solution in original post

Replies 4 (4)

DMT-Mike
Shopify Partner
25 6 9

Hi CL1981,

Welcome to the Shopify Forums.

 

Would it be possible for you to link your Store URL so I can take a look at the issue?

 

Thanks

Need expert help with your Shopify Website? Get in touch.
CL1981
Tourist
4 0 1

Hi @DMT-Mike 

 

Our store is www.driveoutdoorsupply.com

 

Thanks!

DMT-Mike
Shopify Partner
25 6 9

This is an accepted solution.

Here's the best easy solution I can find.

 

Open your stores dashboard --> Online Store --> Actions --> Edit Code --> Open 'theme.scss.liquid' -->

At the bottom of the file copy and paste this code and your collection list images should be the size you want:

 

/* Collection List Image Size Change */

/* Desktop Size */

.one-half {
	width: 20% !important;
}

.one-quarter {
	width: 20% !important;
}

/* Smaller Screen Sizes */

@media only screen and (min-width: 481px) and (max-width: 768px) {
  .one-half {
    width: 33.333% !important;
  }
  .one-quarter {
    width: 33.333% !important;
  }
}

@media only screen and (max-width: 480px) {
  .one-half {
  	width: 50% !important;
  }
  .one-quarter {
  	width: 50% !important;
  }
}

 

Let me know if this works for you!

 

NOTE: If you edit any files on your store, I advise that you duplicate the theme before doing so and editing the duplicated theme instead. This will prevent your live site from breaking if something goes wrong.

Need expert help with your Shopify Website? Get in touch.
CL1981
Tourist
4 0 1

@DMT-Mike Yes Worked perfectly thank you!