In collection pages of our Shopify site, the VIEW DETAILS buttons in every product card are misaligned because of variable lengths of product title. In order to align them we decided to set min-height of product titles of all product cards in a row to the highest of the three in the same row using pure JavaScript. Below is the complete logic to achieve this.

Logic:

• Find ALL selectors of ".card__info"
• Set number of cards per row, to check based on window.innerWidth
• Set max height = 0;
• Foreach card__info selector, execute the following:
• Get the card__title
• Get the height.
• Set max height = max (max_height, new height)
• Foreach card__info selector, execute the following:
• Get the card__title
• Set the min-height to the max value.
• Ideal - do it row-wise window.innerWidth 768px and above - 3 columns else 2 columns

The code below is just the first part of the solution. The output I get in the console is Max Height: NaN instead of the actual height because there are 15 of the products with their titles in the collection page linked below. https://3614yzdr1nq0vwa9-458195004.shopifypreview.com

JavaScript Code:

// Logic to set min-height of product title in collection pages.
//  Find All selectors of ".card__info"
let allCardInfo = document.querySelectorAll(".card__info");
//  Set number of cards per row, to check based on window.innerWidth
//  768px and above - 3 column else 2 columns
var numOfCardsPerRow = ((window.innerWidth >= 768) ? 3 : 2);
var maxHeight = 0; //  Set max height = 0;
//  Foreach card__info selector, execute the following:
// Pass 1.
allCardInfo.forEach(element => {
  let cardTitle = element.querySelector(".card__title");   // Get the card__title
  let cardTitleHeight = cardTitle.clientHeight;   // Get the height.
  maxHeight = Math.max(maxHeight, cardTitleHeight);   // Set max height = max (max_height, new height)
  console.log('Max Height: ' + maxHeight);
  maxHeight = maxHeight;
});
// Pass 2.
allCardInfo.forEach(element => {
  //  Foreach card__info selector, execute the following:
  //  - Get the card__title
  //  - Set the min-height to the max value.
  element.querySelector(".card__title").style.clientHeight = maxHeight;   // Get the card__title
});
// Pass 3.
allCardInfo.forEach(element => {
  console.log('New Min Height: ' + element.querySelector(".card__title").clientHeight);
});

I don't think the min-height that was set with the code above is the right value. Could you please help correct my code to set the correct min height.