Resize Collection thumbnails. Minimal Theme.

Solved
CL1981
Tourist
3 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)

Accepted Solutions
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
3 0 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

CL1981
Tourist
3 0 1

@DMT-Mike Yes Worked perfectly thank you!