Larger images in collection grids for desktop

This modification changes the left and right padding on collection pages. By reducing the padding, product images will appear larger when using image auto-height on your product grid settings. The product images become much larger when pushing out the padding in three main areas:

Example after:

Code if using a collection sidebar:

/* -- code to reduce grid padding on collection pages -- */
@include at-query($min, $medium) {
  .collection .wrapper {
    padding-left: $gutter !important;
    padding-right: $gutter !important;    
    max-width:none;    
  }
  .collection .wrapper .large--one-quarter {
    width: 20% !important;
  }  
}
/* - end - */

Code if not using collection sidebar:

/* -- code to reduce grid padding on collection pages: no sidebar version -- */
@include at-query($min, $medium) {
  .collection .wrapper {
    padding-left: $gutter * 0.5 !important;
    padding-right: $gutter * 0.5 !important;    
    max-width:none;    
  }
}
/* - end - */

Where do I add the code?

Use this link to learn where exactly to add this code snippet:

Where to add your CSS style code