This requires the CSS flag below to release the min-heights – assuming the divs stack.
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | jQuery(document).ready(function($) { $window = $(window); var jma_same_height = function() { $('.same-height-wrap').each(function() { $this = $(this); // counter for successive same-height classes counter = 1; while ($this.find('.same-height-' + counter).length) { var highestBox = 0; $inner = $this.find('.same-height-' + counter); counter++; $inner.each(function() { //give us a fresh start on resize for going between //stacked and not stacked $(this).removeClass('tallest'); $(this).removeClass('not-tallest'); }); if ($this.css('min-height') === '23px') { //match flag in css - //identifies this as a not stacked window $inner.each(function() { $(this).css('min-height', ''); // If this box is higher than the cached highest then store it //remove tallest class from all others and give them not-tallest //and give this one tallext class if ($(this).outerHeight() > highestBox) { highestBox = $(this).outerHeight(); $inner.each(function() { if ($(this).hasClass('tallest')) { $(this).removeClass('tallest'); $(this).addClass('not-tallest'); } $(this).addClass('tallest'); }); } else { $(this).addClass('not-tallest'); } }); // Set the height of all those children to whichever was highest $inner.css('min-height', highestBox + 'px'); } else { $this.find('*[class*="same-height-"]').css('min-height', ''); } } }); } $window.resize(jma_same_height); $window.load(jma_same_height); }); |
Add this flag. Any Css property is fine and any @media is ok (just match CSS property in jQuery – line 20 above).
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | /* "flag for jquery cols same height */ @media(min-width: 768px){ .same-height-wrap { min-height: 23px; } } /* vertically align content */ .not-tallest>div { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) !important; -moz-transform: translate(-50%, -50%) !important; -webkit-transform: translate(-50%, -50%) !important; width: 95%; } |