How can I make cards all equal height?

Featured links

1. Company XYZ documentation on Custom CSS
2. Shopify documentation on adding custom CSS to your theme
3. Shopify documentation on the theme editor

Make cards in the same row appear more consistent by stretching each card to the full height of that row. Until dedicated settings are available, add a small CSS snippet to the section’s Custom CSS setting. For setup details, see Shopify documentation on adding custom CSS to your theme

Make cards equal height

1. In the theme editor, select the section you want to update. For an overview, see Shopify documentation on the theme editor

2. Scroll to the bottom of the section settings and open Custom CSS.

3. Paste the following CSS:

   .card {
     height: 100%;
   }

4. Save your changes.

Position card text below images

By default, card text may be anchored to the bottom of an equal-height card. To place the text directly below the image instead, add this CSS as well:

.card__content {
  justify-content: flex-start;
}

Usage notes

1. Apply CSS per section. Add the code to each section where you want cards to have equal height.
2. Choose text alignment intentionally. Add the second snippet only when you want card text to start directly below its image.
3. Save before previewing. Save your changes, then check the section to confirm the card layout looks right.