Kadence Blocks Make Accordion same Height

If you want a uniform design for your website and want to adjust the height of the accordion headers in the Kadence Blocks plugin, you’ve come to the right place. In this article, I’ll show you how to set all Accordion headers in a block to the same height to achieve a harmonious and well-structured layout.

Problem definition

If you set the Kadence accordion to two or more columns, the headers of the individual accordion headers break differently.

The unsightly result is blocks of different heights.

How to make the accordion headers the same height

To set all accordion headers to the same height, you only need to add a small piece of custom CSS. Either globally, or only for certain blocks.

Here is the step-by-step approach:

1. Global

1. Go to the Customizer and continue to “Additional CSS”
2. Add custom CSS:
   • Copy and paste the custom CSS:

.kt-blocks-accordion-header {
 height: 100px;
}

This CSS code sets the height of the accordion header to 100px. You can adjust the value to your liking to choose a height that better suits your design.

3. Customize the height:
   • The value 100px is just an example. You can increase or decrease it depending on how much space you need for the accordion header. Here are a few suggestions:
     • 80px for smaller headers
     • 120px for larger, more eye-catching headers
4. Save and preview:
   • After you’ve inserted the CSS, save your changes and preview the page to make sure everything looks the way you want.

Now you have set the Accordion headers to 100px height on your entire website.

2. Specific

1. In the block editor
   • Open your page or post in the WordPress block editor and search for the Kadence Accordion block.
   • Now select the overlying Row Layout and switch to “Custom CSS” in the right-hand menu of the block.
2. Add in Custom CSS:
   • Copy and paste the custom CSS:

selector .kt-blocks-accordion-header {
  height: 100px;
}

Note that “selector” is already present in the “Custom CSS” field. Overwrite the entire field with the code snippet.

This CSS code sets the height of the accordion header to 100px. You can adjust the value to your liking to choose a height that better suits your design.

Why uniform heights are important

Uniform heights for accordion headers not only ensure visual consistency, but also improve the user experience. Your visitors will find their way around more easily as the accordion elements on your page will appear uniform and there will be no distracting differences in the height of the individual headers.

Conclusion

Adding custom CSS in Kadence Blocks is an easy way to customize the height of the accordion headers on your website and ensure a consistent design. By setting the height to a fixed value, you can refine the look of your accordion block and ensure that all headers look consistent and professional.

Try it out and adjust the height of the accordion headers to get the best result for your site!