Keep Equal Height Columns and another media query for tablets

Hey karinorage,
Thanks for your patience, when the columns are set to equal height their display property is changed to table-cell and they are wrapped in a parent div flex_column_table this is what gives it the “equal height”, at mobile when the columns are shown at full width the display property is changed to block and they are no longer “equal height”, although it is hard to spot this on mobile when the columns are stacked.
This is why on tablets they can not be two columns wide, because their display property would need to be changed and they would no longer be “equal height”.

So to solve this for you I added this function to the end of your parent theme functions.php:

function custom_equal_height_columns() { ?>
  <script>
(function($){
  	$('.equal-height-columns').each(function(){  
     var $columns = $('.equal-these-columns',this);
     var maxHeight = Math.max.apply(Math, $columns.map(function(){
         return $(this).height();
     }).get());
     $columns.height(maxHeight);
});
})(jQuery);
</script>
  <?php
}
add_action('wp_footer', 'custom_equal_height_columns');

and I added the custom class equal-height-columns to the color section that contains your individual height columns:

and this custom class equal-these-columns to each of the columns:

Now the individual height columns are equal height and break into two wide for tablets:

Please check.

For your media query up to 1130px I recommend this css:

@media only screen and (min-width: 768px) and (max-width: 1130px){
.responsive .av_one_fourth.first + .av_one_fourth.flex_column_div, 
.responsive .av_one_fourth.first + .av_one_fourth + .av_one_fourth + .av_one_fourth.flex_column_div {
	margin-left: 4%;
    width: 48%;
}
.responsive .av_one_fourth.first + .av_one_fourth + .av_one_fourth.flex_column_div,
.responsive .av_one_fourth.first.el_before_av_one_fourth.flex_column_div {
	margin-left: 0%;
    width: 48%;
}
}

I did not add this for you, after applying the css, please clear your browser cache and check.

I also recommend adding a child theme, so your functions.php customizations will not be lost with future theme updates Read about it & Get it here
Or you could use the plugin WPCode – Insert Headers, Footers, and Code Snippets, this plugin supports PHP code snippets, JavaScript code snippets, & CSS code snipets.

Best regards,
Mike

Hi,
Glad that this helped and thanks for sharing your CSS to add the bottom margin, perhaps this with help someone else in the future.
If you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike