Tagged: ,

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • May 13, 2022 at 12:32 pm #1351662
    hypergolica

    Dear Support:
    What is the most effective way to realign elements across multiple columns, especially when the initial element varies in height? In other words, I have special heading followed by images. The special headings have different heights, because the text varies, but I’d like the images below them to all realign so they are even.
    I know I can control the spacing below the special heading, but is there a way to do this dynamically? For example, is there a way to take the highest Special Heading and apply it to all?
    Many thanks for the help.
    Best,
    Tim

    May 15, 2022 at 8:06 pm #1351869
    Mike

    Hey Timothy,
    Thanks for the link to your page, I think I understand, try adding this code to the end of your functions.php file in Appearance ▸ Editor:

    function custom_equal_height_script() { ?>
    <script>
(function($){
  	$('.home .entry-content-wrapper').each(function(){  
     var $columns = $('.flex_column.av_one_fourth>.av-special-heading>.av-special-heading-tag',this);
     var maxHeight = Math.max.apply(Math, $columns.map(function(){
         return $(this).height();
     }).get());
     $columns.height(maxHeight);
    });
     $('.home .entry-content-wrapper').each(function(){  
     var $columns = $('.flex_column.av_one_fourth>.av-special-heading>.av-subheading_below',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_script');

    this will adjust all of the av-special-heading-tag & av-subheading_below to match the height of the tallest one, please see the screenshot in the Private Content area.
    Note that your last column has a different bottom padding, you should correct in the element.

    Best regards,
    Mike

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.