Same height columns on a row

Support
#1

Hi,
I would like my columns to have the same height at all responsive sizes (desktop, notebook, tablet, cellphone).

How could I achieve this on a row with 5 hover boxes?

Here is my url : https://exceltecinc.com/

(it’s the row below the slider).

Thank you support team.

#2

Hi @ProductionMD1986,

Thank you for writing in, it seems you’re using visual composer. Please inspect your ROW and check the Equal Height option.

Hope it helps,
Cheers!

#3

Hi,

I don’t seem to find that option… By the way, my settings are called, “Content Band Settings” or “Columns Settings”… and not “Row Settings” Maybe you are referring to an older version of WPBakery Page Builder…?

#4

Hi @ProductionMD1986,

Those ROW settings are available on the latest version compatible with the theme which is 6.1. Would you mind sharing credentials so we can see your setup? Please add it inside a secure note.

#5

Hi,

Here are my credentials :

Little reminder, it’s in the home page, right below the slider and it’s the row with the hover boxes.

Thanks again support team.

#6

Hi @ProductionMD1986,

Yeah sorry about that, that option is only available if you turn off the Legacy X Integration option under WPBakery > General Settings, however, you might not want to do this because this will break the layout of your site (pages that was built with Visual Composer).

Regretfully there is no other native way of making the column Equal Height other than the option I pointed above.

Thanks,

#7

Hi,

Well actually, I tried to turn it off, just to try it (the Legacy X Integration)… but the result is still the same… (see my attachment). You can tell the Legacy is deactivated because the codes that hide the 5 red accordions on desktop and laptop devices don’t longer work.

Isn’t there a class I can add to the hover boxes in order to force their equal height?

#8

Hey @ProductionMD1986,

Please keep the Legacy X Integration option enabled otherwise you’ll have layout issues. You can achieve this with custom CSS too, assign a class same-height-row to your content band that contains those five columns, then add the following code in the Theme Options > CSS:

@media screen and (min-width: 980px) {
    .same-height-row .x-container {
        display: flex !important;
    }
    .same-height-row .vc-hoverbox-wrapper.vc-hoverbox-align--center,
    .same-height-row .vc-hoverbox-wrapper.vc-hoverbox-width--100 .vc-hoverbox {
        height: 100%;
    }
}

Please note that the code provided above serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.

Hope this helps!

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.