Collection List: Adjust height for larger square-like size

If you'd like to change the height of the homepage Collection list images to be longer, you can try this modification.

Result:

Before:

Option 1: Change size for tablet and desktop only

/* -- code to make Collection list image longer -- */
@include at-query($min, $medium) {
.collection-grid-item {
    min-height: 500px;
  }
}
/* - end - */

Or

Option 2: Change size for mobile, tablet and desktop

/* -- code to make Collection list image longer -- */
.collection-grid-item { min-height: 500px; }
/* - end - */

The value of 500px; can be modified to your preference.  Try a larger number like 800px for a longer view if you haven't set a banner image.


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

Still need help? Contact Us Contact Us