Align Buttons

Hey ballindigital,
Thank you for the link to your site, when I check your page on my desktop the height of the elements are the same and so the buttons are lined up, but I believe that your screen size is smaller, so we need to set the height of the elements at certain screen sizes when the content length causes the text to wrap into a new line. I see you are using three grid rows with two cells each, and in each is a image, special heading, text block and a button. So we need to set the height for all special headings and text blocks to the same.
Try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function grid_row_special_headings_and_text_blocks_equal_heights() { ?>
  <script>
(function($){
	var width = $(window).width();
  	if (width > 767) {
  $('.page-id-3083 .av-layout-grid-container').each(function(){  
     var $specialHeading = $('.flex_cell .av-special-heading-tag',this);
     var $textBlock = $('.flex_cell .av_textblock_section p',this);
     var specialHeadingHeight = Math.max.apply(Math, $specialHeading.map(function(){
         return $(this).height();
     }).get());
     var textBlockHeight = Math.max.apply(Math, $textBlock.map(function(){
         return $(this).height();
     }).get());
     $specialHeading.height(specialHeadingHeight);
     $textBlock.height(textBlockHeight);
  });
} else {}
})(jQuery);
</script>
  <?php
}
add_action( 'wp_footer', 'grid_row_special_headings_and_text_blocks_equal_heights', 99 );

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.

Best regards,
Mike

Hi,

Thank you for the update.

We can’t find the script anywhere in the document. Where did you put the script? Please enable the Appearance > Theme File Editor panel so that we can test the script properly. You can place this code in the wp-config.php file.

define( 'DISALLOW_FILE_EDIT', false );
define( 'DISALLOW_FILE_MODS', false );

// https://world.siteground.com/kb/how-to-disable-theme-editor-and-plugin-editor-in-wordpress-admin-panel/

Best regards,
Ismael

Hi,
It could be disabled by a plugin or by SiteGround as in the documentation Ismael linked to above, if you can’t enable it ask SiteGround to help you or use FTP to edit the file directly.

Best regards,
Mike

Hi,

Thank you for the screenshot.

We edited the script in the functions.php file to enable cells to readjust when the browser size changes. Here is the updated code.

function grid_row_special_headings_and_text_blocks_equal_heights() { ?>
    <script>
    (function($){
        function resizeGridCells()
        {
            var width = $(window).width();
            if (width > 767) {
                $('.page-id-3083 .av-layout-grid-container').each(function(){  
                    var $specialHeading = $('.flex_cell .av-special-heading-tag',this);
                    var $textBlock = $('.flex_cell .av_textblock_section p',this);
                    var specialHeadingHeight = Math.max.apply(Math, $specialHeading.map(function(){
                        return $(this).height();
                    }).get());

                    var textBlockHeight = Math.max.apply(Math, $textBlock.map(function(){
                        return $(this).height();
                    }).get());

                    $specialHeading.height(specialHeadingHeight);
                    $textBlock.height(textBlockHeight);
                });
            } 
        }
    
        $(window).on('debouncedresize', function() {
            resizeGridCells();
        });

        resizeGridCells();
    })(jQuery);
  </script>
    <?php
  }
  add_action( 'wp_footer', 'grid_row_special_headings_and_text_blocks_equal_heights', 99 );

Best regards,
Ismael

Hi,
Glad Ismael could help, 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