csswordpressvisual-composer

Making WordPress Columns Same Size

I have been working on a WordPress site for several hours now and cannot for the life of me figure this one out. I have 4 columns in a row on my page and they are sized dependent on content. I need all 4 to be the same size. I have added a class to each of the columns and tried manually setting the height in CSS but nothing is changing. Here is the VC code of my project. Is my class of col-height even targeting the right place and if so, what should my CSS look like to achieve this? Thanks for any help!

[vc_row]
    [vc_column width="1/4" icons_position="left" el_class="col_height"]
        [vc_cta h2="Handguns" add_button="bottom" btn_title="Learn More"]Info.[/vc_cta]
    [/vc_column]
    [vc_column width="1/4" icons_position="left" el_class="col_height"]
        [vc_cta h2="Bladed Objects" add_button="bottom" btn_title="Learn More"]Info.[/vc_cta]
    [/vc_column]
    [vc_column width="1/4" icons_position="left" el_class="col_height"]
        [vc_cta h2="Rifles" add_button="bottom" btn_title="Learn More"]Info.[/vc_cta]
    [/vc_column]
    [vc_column width="1/4" icons_position="left" el_class="col_height"]
        [vc_cta h2="Incendiary Devices" add_button="bottom" btn_title="Learn More"]<p>[/vc_cta]
    [/vc_column]
[/vc_row]
Solution

  • I have updated this answer with the working solution. Please follow the below steps.

    How to set columns to equal height in Visual Composer?

    1. VC Settings

    In order to set columns within a row to be equal height, you must navigate to Row parameter window and check Equal height option to be active. All columns within this row will have equal height and align with the longest column.

    VC Equal Height Columns

    Source: WPBakery Page Builder Knowledge Base

    2. VC Code inside your page

    [vc_row equal_height="yes" el_id="lh-custom"]
    [vc_column width="1/4" icons_position="left"]
        [vc_cta h2="Handguns" add_button="bottom" btn_title="Learn More" el_class="col_height"]Info.[/vc_cta]
    [/vc_column]
    [vc_column width="1/4" icons_position="left"]
        [vc_cta h2="Bladed Objects" add_button="bottom" btn_title="Learn More" el_class="col_height"]Info.[/vc_cta]
    [/vc_column]
    [vc_column width="1/4" icons_position="left"]
        [vc_cta h2="Rifles" add_button="bottom" btn_title="Learn More" el_class="col_height"]Info.[/vc_cta]
    [/vc_column]
    [vc_column width="1/4" icons_position="left"]
        [vc_cta h2="Incendiary Devices" add_button="bottom" btn_title="Learn More" el_class="col_height"]<p>&nbsp;</p>[/vc_cta]
    [/vc_column]
[/vc_row]

    3. jQuery code inside functions.php

    function lh_vc_same_height_cols() {
    ?>
        <script type="text/javascript">
            jQuery(document).ready(function() {
                jQuery(document).ready(function() {
                    var maxHeight = -1;

                    jQuery('#lh-custom .col_height').each(function() {
                        maxHeight = maxHeight > jQuery(this).height() ? maxHeight : jQuery(this).height();
                    });

                    jQuery('#lh-custom .col_height').each(function() {
                    jQuery(this).height(maxHeight);
                });
            });
        });
        </script>
    <?php
}
add_action( 'wp_footer', 'lh_vc_same_height_cols' );

    Source: WPMU DEV Forum

    Output Equal columns output