Product grid misalignment due to text length

[gestaomp]

Hi everyone,

I’m having an issue with my product grid not aligning properly because of the different text lengths in product titles and descriptions. Some products have longer names, which makes the grid uneven and affects the overall layout.

Is there a way to force all product cards to have the same height, regardless of text length? Maybe by setting a fixed height for the title or description?

I’d appreciate any help or suggestions!

Website link: https://hhppaz-s0.myshopify.com/collections/all?page=1

[devcoders]

Hello @gestaomp

Is the height the same, dear?

[gestaomp]

[LizHoang]

Hi Gestaomp

You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file app.css and add this code at the end of the file

a.product-card-title {
    height: 80px !important;
}

Result:

Best,
Liz

[TheUntechnickle]

Hey @gestaomp ,

To ensure all product cards have the same height regardless of text length, you can use CSS Flexbox or Grid to enforce consistent sizing. And, we might have to truncate the product title if it goes beyond 2 lines. Here’s a step-by-step solution:

1. Target the Product Grid Container

Add CSS to your Shopify theme (via theme.css or the “Custom CSS” section in the theme editor) to make the product grid use CSS Grid or Flexbox:

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-auto-rows: 1fr; /* Equal row height */
  gap: 20px; /* Adjust spacing */
}

2. Set Fixed Height for Product Cards

Force product cards to fill the grid row height and use Flexbox for internal alignment:

.product-card {
  height: 100%; /* Take full grid row height */
  display: flex;
  flex-direction: column;
}

3. Make Content Areas Flexible

Ensure text sections expand to fill available space while buttons stay at the bottom:

.product-card__content {
  flex-grow: 1; /* Grow to fill remaining space */
  padding-bottom: 10px; /* Add spacing before buttons */
}

4. Truncate Long Text

Prevent titles/descriptions from overflowing using line clamping:

.product-title {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Limit to 2 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 8px; /* Optional spacing */
}

---

Full Code Example

/* Apply to your product grid */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-auto-rows: 1fr;
  gap: 20px;
}

/* Product card styling */
.product-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid #ddd; /* Optional border */
  border-radius: 8px; /* Optional rounded corners */
}

/* Content section */
.product-card__content {
  flex-grow: 1;
  padding: 15px;
}

/* Truncate product titles */
.product-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 3em; /* Fallback for line height */
}

/* Fix button alignment */
.product-card__button {
  margin-top: auto; /* Push buttons to the bottom */
  padding: 15px;
}

---

**Here’s how to implement:**1. Replace .product-grid, .product-card, and other classes with the actual class names used in your theme (inspect your site with browser dev tools to confirm).

1. Adjust values like minmax(250px, 1fr) to match your desired card width.

2. Test responsiveness on mobile/desktop.

This approach ensures consistent heights while keeping buttons aligned at the bottom. Feel free to reach out in case if you’ve any questions for us, would love to help.

Cheers!
Shubham | Untechnickle

[devcoders]

Hello @gestaomp

Go to Online Store, then Theme, and select Edit Code.
Search for assets/base.css Add the provided code at the end of the file.

.collection-container .product-card-title {
min-height: 67px;
}