Tweak thumbnails size

Our theme's grid is always filling the screen, thus permanently resizing the thumbnails and increasing / decreasing the number of columns based on various screen sizes.

You can edit the default behaviour by editing the theme's main stylesheet. Just open /assets/css_main.scss.liquid and right at the end, paste the following code:

.grid-item {
 @media all and (min-width: 2560px) {
  width: 16.666%;
 }
 @media all and (max-width: 2560px) {
  width: 20%;
 }
 @media all and (max-width: 2080px) {
  width: 25%;
 }
 @media all and (max-width: 1640px) {
  width: 33.33%;
 }
 @media all and (max-width: 1180px) {
  width: 50%;
 }
 @media all and (max-width: 360px) {
  width: 100% !important;
 }
}

This is the default grid... Basically, the theme is setting the number of columns for each screen size. The larger the screen size, the more columns are present. Here's a breakdown of the above code:

  • Screens larger than 2560px ~ 6 columns
  • Screens between 2080px - 2560px ~ 5 columns
  • Screens between 1640px - 2080px ~ 4 columns
  • Screens between 1180px - 1640px ~ 3 columns
  • Screens between 360px - 1080px ~ 2 columns
  • Screens smaller than 360px ~ 1 column 

To increase / decrease the size of your thumbnails on a certain resolution, you can either modify the resolution on which the thumbnail's size changes, or change the width of the thumbnail. For example, if you always want to have two columns, you would set all the widths to 50%.

Good luck!