Same height containers

Hi there, I have the same issue multiple times so perhaps I can solve this all at once.

I am trying to ensure that columns/elements side by side stay the same height as each other. Examples are:

the webform and image slider on this page:

The two central columns on this page:

On top of that - I need to make sure all 3 of the top flipcards on this page stay the same height, and that the background images always fill the containters - I tried using ‘cover’ in the inline css, but didn’t seem to work:

Any help would be great!

Thanks a lot.


To fix that, you will need to add a CSS inline for each element that you want, for example:

I checked your form using the Chrome inspector and found the exact height to add: - Now, you need to add the height: 511px; at the Customization tab (available in the Cornerstone).

Hi John,

Thanks for the reply, however I don’t see that working considering the image slider I want the webfrom to match the height of responds to the size of the window. So if I set a concrete height to the webform, that will remain at 511px, while the image slider changes in height as the page is moved.

Is there no way to ensure elements match each others’ size responsively?

Hi there,

This is a tricky thing to achieve because Revolution Slider adjusts the dimension of the slider depending on the size of the screen and the form’s height also changes accordingly to accommodate its content to the container.

You can try using this code snippet here which sets the height of the columns equal in the initial load.

This feature is not currently supported in Cornerstone. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

As for the background image in a flip card, I checked the homepage of your site and the background images seem to fill the entire column they are set on.

Thanks for understanding. Take care!

Where should I input the code you provided?

Also, the backgrounds do fill, however - depending on page size, again they differ in height…

(the third flipper is shorter)


Hi There,

The code suggested should go to Cornerstone Page > Content JS.
Since that is card element and the code is meant for columns, you need to make some adjustment.
The card element is on section 1 and it is card element. From the code suggested, update this part:
$("#x-section-4 .x-column")
To this:
$("#x-section-1 .x-card-inner")

Further customization from here would be getting into custom development. You may wish to consult a developer for more customization. Thank you for understanding.

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