Responsive behaviour of picture to cover column height at all times

Hey CJGVD,
Thank you for your patience, in your grid row element example it look like to have added an image element inside of the grid element, instead try adding the image as a background image to the grid and set the Background Image Position as center center

on my test page I set each grid row element as 50% of the height and the image fills the cell size:

the only issue is the when the grid becomes a single column at mobile the cells with the background image have no content so the height doesn’t match as the equal height is not applied:

To correct I added the custom class equal-height-mobile-grid to the grid row elements, my test page has three:

and added this code to the end of my child theme functions.php file in Appearance ▸ Editor:

function grid_row_elements_equal_height_for_mobile() { ?>
  <script>
window.addEventListener('DOMContentLoaded', function() {
  (function($){
  	var width = $(window).width();
  	if (width < 767) {
    $('.equal-height-mobile-grid').each(function(){  
     var $columns = $('.flex_cell .flex_cell_inner',this);
     var maxHeight = Math.max.apply(Math, $columns.map(function(){
         return $(this).height();
     }).get());
     $columns.attr('style', 'height: '+ maxHeight +'px !important');
  });
  	} else {}
  })(jQuery);
});
</script>
  <?php
}
add_action('wp_footer', 'grid_row_elements_equal_height_for_mobile', 99);

and now on mobile the image cell is equal height:

Please give this a try.

Best regards,
Mike

Hi,

Thank you for the update.

Is it then right to NOT set any height limits on each grid row element?

Yes, that’s correct. Don’t set a maximum height if you want the container to adjust based on the content’s length.

The extra code for functions.php seems good to me as it works. And it is not related to setting the height to 50%, am I right?

The script retrieves the height of the tallest column or cell in the container and applies this height value to the others

So to replicate the layout of this previously mentioned hotel site, it is best to use grid rows (Rasterzeile) and not colour sections (Farbsektion), am I right?

Yes, use the Grid Row element with its cell-based containers instead of the Color Section and Column elements.

Best regards,
Ismael