Vertically Aligning Product Card Titles in a Featured Collection

[Toy_Barnhaus]

I have been trying to align our “Popular Products” section on our Home Page, however all the code I have tried does not fix the issue.

I want the text of the product title and price to be in line with the other product cards in the featured collection. For example, the “Tonies Starter Set - Red” title text and price are too high up compared to the others.

The images are in the correct position, however when there is a product within this featured collection with a shorter title it ends up like this.

Please let me know if anyone can give any ideas/advice.

Thanks,

URL: https://www.toybarnhaus.co.uk/

[TheUntechnickle]

Hey @Toy_Barnhaus ,

The problem occurs because product cards with different image aspect ratios and title lengths are causing inconsistent layout. The main issue is that the Tonies Starter Set card has a different image aspect ratio (72.29% versus 100% for most other products), which pushes the content positioning differently.

Here’s what you need to fix:

1. Add fixed height to your card content areas by modifying your CSS. You need to ensure all card information containers have the same height regardless of content length.

.card__content {
  display: flex;
  flex-direction: column;
  min-height: 120px; /* Adjust value as needed */
}

.card__information {
  flex-grow: 1;
}

.card-information {
  margin-top: auto;
}

1. Ensure your images maintain a consistent aspect ratio by adding:

.card__media img {
object-fit: contain;
height: 250px; /* Set a fixed height */
width: 100%;
}

1. For the Quick Add button section, make sure it has the same spacing:

.quick-add {
  margin-top: auto;
  padding-top: 10px;
}

These CSS changes will create a more uniform look by:

• Giving all product information boxes the same minimum height
• Making the price information align at the same position
• Ensuring the “Add to cart” buttons line up
• Adjusting product images to maintain consistent dimensions

The key problem is that your card layout is letting content determine the positioning rather than using a structured grid with fixed dimensions for key elements. These changes should give your product grid a much cleaner, more aligned appearance.

Hope this helps Feel free to email if you’ve any more questions for us.

Cheers!
Shubham | Untechnickle

[EBOOST]

Hi @Toy_Barnhaus ,

May I suggest to update code these steps:

1. Go to Store Online-> theme → edit code

2. Assets/component-card.css
3. Add code below to end of file

.product-card-wrapper .card__inner,
.product-card-wrapper  .card--card.card--media > .card__content {
	height: inherit;
}

.product-card-wrapper .card__information {
	display: flex;
  	flex-flow: column;
}

.product-card-wrapper .card-information {
	margin-top: auto;
}

Result