Jquery function to vertical align the elements doesn't work
<p>I am using this function to vertically align the information regarding the projects in the following <a href="https://diviunlimited.com/demos/minimal/" rel="nofollow">link</a>:</p>

<pre><code>/* First make each project-section div full height */   
$(window).on("load resize scroll", function(e) {
    if ($(window).height() &gt; 600 &amp;&amp; $(window).width() &gt; 980 ) {
        screenHeight = $(window).height();
        menuHeight = $('#main-header').outerHeight();
        finalHeight = screenHeight - menuHeight;
        $('.project-section').css('height', finalHeight + 'px');

        /* Then Vertically align the elements */
        var colHeightElement = $('.project-section &gt; .et_pb_row &gt; .et_pb_column');
        colHeightElement.each(function( index ) {
            var colHeight = $(this).outerHeight();
            var colPadding = (finalHeight-colHeight)/2;
            $(this).css('padding-top', colPadding + 'px');
        });

    }


});
</code></pre>

<p>As you can see in the link the elements never get the proper height, but I can not find why.</p>