JustinWDev of Archived Theme Support
5/11/2015 - 7:44 PM

Disable the 100% image height and make collection/product pages more grid like

Disable the 100% image height and make collection/product pages more grid like

.gallery__inner {
  display: table;
}
.gallery__slide {
  height: inherit;
  display: table-cell;
  vertical-align: middle;
}
.product__link {
  position: relative;
  display: block;
  height: auto;
  padding: 0 50px;
}
.slide__image {
  height: initial;
  max-height: 330px;
  width: auto;
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  .gallery__inner {
    display: block;
  }
  .gallery__slide {
    display: block !important;
  }
  .product__link {
    position: static;
  }
  .slide__image {
    height: inherit;
    margin: 0 auto;
  }
}

Some merchants like the horizontal scroll of Lookbook but don't have large enough images to view nicely in the theme. Add the CSS at the end of the css file to instantly fix this scenario.

Before

After