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.

JavaScript Code:

//  Find All selectors of ".card__info"
let allCardInfo = document.querySelectorAll(".card__info");
//  Set number of cards per row, to check based on window.innerWidth
var numCardsPerRow = ((window.innerWidth >= 768) ? 3 : 2);
var maxHeight = 0; //  Set max height = 0;
//  Foreach card__info selector, execute the following:
allCardInfo.forEach(element => {
  let cardTitle = element.querySelector(".card__title");   // Get the card__title
  let cardTitleHeight = cardTitle.height;   // Get the height.
  // Set max height = max (max_height, new height)
  maxHeight = Math.max(maxHeight, cardTitleHeight);
  console.log('Max Height: ' + maxHeight);
});