Flex Container

Hi,
Sorry for the late reply and thanks for the screenshots and link to your page, I don’t believe that the custom css above is going to be the solution, as I understand your question, which is to have all 3 columns display the same height for each inner element, this is the goal, correct?
So the equal height flex columns addresses the outer height, but your issue is the inner height.
In each column you have an image, text, HR, price, and a button. Of all of these, the text element is the one element that will have a different height for each column, so if you add a custom class to the text element in each column the same height can be applied to each with css or js.
Please give this a try. Do you have a test page that looks more like your screenshots?

Best regards,
Mike

Hi,
If you add a custom class to the text element in the middle of the second & third columns, such as “custom-class” you could use this css:

.custom-class {
min-height:220px;
}

Without the custom class the css would look like this for your test page second & third columns:

#top.page-id-742 #main > div > div > main > div > div > div.flex_column_table > div > section:nth-child(3),
#top.page-id-742 #main > div > div > main > div > div > div.flex_column_table > div > section:nth-child(3) {
	min-height:220px;
}

I noticed that in your second column, the HR, above the price, has a 30px top margin, so you will want to remove this to match the third column.

Best regards,
Mike

Hi,
Not in this situation. I checked your other pages in your “Supplements” menu to see if there is a way to have each of these columns have the same height for the text block element across these pages and it can be achieved with the following script. Try adding this code to the end of your functions.php file in Appearance > Editor:

function custom_equal_height_row_script(){
  ?>
  <script>
(function($){
  $(window).load(function(){
    (function() {

      var currentTallest = 0,
          currentRowStart = 0,
          rowDivs = new Array();

      function setConformingHeight(el, newHeight) {
        el.data("originalHeight", (el.data("originalHeight") == undefined) ? (el.height()) : (el.data("originalHeight")));
        el.height(newHeight);
      }

      function getOriginalHeight(el) {
        return (el.data("originalHeight") == undefined) ? (el.height()) : (el.data("originalHeight"));
      }

      function columnConform() {
      	$('.hr-custom.hr-center.hr-icon-no.el_after_av_textblock').css({'margin-top':'0'});
        $('.flex_column.av_one_third section:nth-of-type(2)').each(function() {

          var $el = $(this);

          var topPosition = $el.position().top;

          if (currentRowStart != topPosition) {
            for(currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) setConformingHeight(rowDivs[currentDiv], currentTallest);

            rowDivs.length = 0;
            currentRowStart = topPosition;
            currentTallest = getOriginalHeight($el);
            rowDivs.push($el);

          } else {

            rowDivs.push($el);
            currentTallest = (currentTallest < getOriginalHeight($el)) ? (getOriginalHeight($el)) : (currentTallest);

          }
          

        });

        for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
          setConformingHeight(rowDivs[currentDiv], currentTallest);
        }

      }

      $(function() {
        columnConform();
      });

    })();
});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'custom_equal_height_row_script');  

While this works for your six pages I would recommend adding custom classes to each of the columns so there won’t be any conflicts with other columns.

Best regards,
Mike