3-row-js edit

/* scss/3-row-js/_adjust-row-card-height.scss */

/* js/adjust-row-card-height.js */function adjustRowCardHeight() { // get every .wm-card container (used for Icon and Stat cards) const cardContainers = document.querySelectorAll('.wm-cards:not(.wm-slideshow__slides)'); // loop through containers for (let i = 0; i < cardContainers.length; i++) { // set base height let height = 0; // get all .wm-cards let rowCards = cardContainers[i].querySelectorAll('.wm-card'); // reset to auto or else we can't check height rowCards.forEach((card) => { card.style.height = "auto"; }); // determine if any cards are side by side + gap (stacked means no height should be set) let containerWidth = cardContainers[i].offsetWidth; // get flex-basis style of first card let firstCardStyles = getComputedStyle(cardContainers[i].querySelector('.wm-card')); let firstCardWidth = parseInt(firstCardStyles.getPropertyValue('flex-basis'), 10); let isNotStacked = containerWidth >= (firstCardWidth * 2 + 20); // if any cards are side by side, set height on cards if (isNotStacked) { // get tallest card's height rowCards.forEach((card) => { height = Math.max(height, card.offsetHeight); }); // set the height for each card rowCards.forEach((card) => { // if not an .IconRow__card, set a minimum height if (!card.classList.contains('IconRow__card') && !card.classList.contains('StatsRow__card')) { height < 230 ? height = 230 : null; } card.style.height = height + 'px'; }); } } } window.onload = adjustRowCardHeight; window.addEventListener('resize', adjustRowCardHeight);