How do I evenly space my slightly modified product cards (Publisher)

Shopify Discussion

Topic summary

A user is experiencing uneven vertical spacing between product cards on their Shopify store’s collection page after customizing them to display as a single-column list with thumbnails.

The Issue:

  • Cards with two-line captions (pulled from custom metafields) have larger gaps below them compared to cards with single-line captions
  • The user wants uniform spacing based on thumbnail images, not text content
  • Example: gap between ‘Alloy’ and ‘Beneath Lighted Coffers’ is much larger than between ‘Ki - Iro’ and ‘Oscillate’

Modifications Made:

  • Custom CSS in base.css to create horizontal card layout with 7% width thumbnails and 93% content area
  • Modified card-product.liquid to add audio player, display 1-2 lines of metafield data as captions, and hide prices
  • User admits limited coding knowledge and has been learning through trial and error

Status: Another user has requested the store URL to investigate further. The discussion remains open with no solution provided yet.

Summarized with AI on November 14. AI used: claude-sonnet-4-5-20250929.
1

Store link

I’ve made a handful of changes to my base.css and card-product.liquid files to modify my product cards so that they appear in a vertical, single-column list with thumbnail images.

The problem I’m running into is that the product cards are not spacing evenly. I’d like the card spacing to be uniform and based off of the thumbnail images, so that each thumbnail is equally spaced from the next. Instead, the spacing seems to be dictated by the card text, with cards having a two-line caption (which I grab from custom metafields via the Liquid code below) getting extra vertical spacing compared to cards with a caption that’s only one line. The gap between ‘Alloy’ and ‘Beneath Lighted Coffers’, for example, is much larger than that between ‘Ki - Iro’ and ‘Oscillate’.

I don’t actually know coding and have slowly been piecing this together via Googling + trial and error. Any advice?

My additions to base.css:

@media only screen and (min-width: 750px) {

.collection .grid__item {
width: 100% !important;
max-width: 100% !important;
}
.collection .card {
justify-content: space-between !important;
align-items: center !important;
gap: 2rem;
flex-direction: initial !important;
}
.collection .card__inner {
width: 7%;
}
.collection .card__content {
width: 93% !important;
}
.collection .card__information {
display: flex;
justify-content: space-between;
align-items: center;
}
.collection .card__heading {
width: 50%;
}
.collection .card-information {
width: 50%;
text-align: right;
}
}

My changes to the card-product.liquid file have been a bit more involved:

  1. Modify product titles
  2. Display 1-2 lines (depending on the product) of metafield data as a subheader/caption
  3. Add an audio player
  4. Hide item prices (this is done with a Custom Liquid section, not in the card-product.liquid file)

It seems like only the subheader/caption code is relevant here, so I’ve bolded it below:

2

Please provide the store URL, will take a look.

Thanks,
@biznazz101