BugWP logo BugWP
Back to Community
Home / Community / Plugin → Gutenberg blocks with ai by kadence wp – page builder features

How to Make Kadence Info Boxes and Columns the Same Height

20 threads Sep 10, 2025 Plugin → Gutenberg blocks with ai by kadence wp – page builder features

Content

A common challenge when building layouts with the Kadence Blocks plugin is getting elements like Info Boxes or columns within a Row Layout to have a uniform height. This is especially noticeable when content length varies, causing an uneven and unprofessional look. This guide explains why this happens and provides the most effective solutions.

Why Elements Have Different Heights

By default, blocks like the Info Box and columns in a Row Layout will only be as tall as the content inside them. This is standard web behavior. When one Info Box has two lines of text and another has five, their containing elements will naturally have different heights. The goal is to force these containers to match the height of the tallest element in the row.

Common Solutions for Equal Height Layouts

1. Use the Built-in "Inner Column Height 100%" Setting

For columns within a Row Layout block, the plugin offers a direct setting to help with equal heights.

  1. Select the parent Row Layout block.
  2. In the block settings sidebar, navigate to the Structure Settings tab.
  3. Enable the option labeled Inner Column Height 100%.

This applies the CSS height: 100%; to the inner columns, instructing them to stretch to fill the full height of the row. This works best when the row itself has a defined height or when all columns are in the same row. As noted in the sample threads, this setting may not always propagate perfectly to inner blocks like the Info Box, which leads to the next solution.

2. Apply a Minimum Height to Individual Blocks

If the above method doesn't achieve the desired result, you can set a uniform minimum height on each block.

  1. Select each Info Box block (or other block) in your row.
  2. In the block's settings, look for the Dimensions or Advanced tab.
  3. Find the Minimum Height setting and enter a value, such as 300px.

This ensures every block is at least the height you specify. The downside is that you must manually set this value and update it for each block if your design changes.

3. Add Custom CSS (Advanced)

For more control, you can use custom CSS. This is useful if the built-in settings don't work for your specific layout hierarchy (e.g., Row Layout > Section > Info Box).

To make inner columns stretch:
Add the following CSS in the Customizer under Additional CSS or in your theme's stylesheet.

.kt-inside-inner-col {
    height: 100%;
}

To make Info Boxes equal height in a row:
You can target the Info Boxes directly. The following CSS uses flexbox to force equal heights on all items within the same container.

.wp-block-kadence-rowlayout {
    display: flex;
}

.kt-info-box {
    height: 100%;
}

Note: The exact CSS selector might vary depending on your theme and other plugins. Using your browser's inspector tool to identify the correct classes is recommended.

Conclusion

Achieving equal heights for Kadence Blocks is a common layout goal. The most straightforward method is to use the Inner Column Height 100% setting on the Row Layout block. If that doesn't fully work for your scenario, setting a Minimum Height on individual blocks or adding a small amount of Custom CSS are reliable alternatives. For complex layouts, CSS is often the most powerful and flexible solution.

Related Support Threads Support