Back to Community

Troubleshooting Column and Row Layout Issues in Kadence Blocks

Content

Users of the Gutenberg Blocks with AI by Kadence WP plugin sometimes encounter issues where column and row layouts don't display or function as expected. This guide covers the most common causes and their solutions, compiled from community reports and resolutions.

Common Symptoms

  • Columns stack vertically instead of appearing side-by-side on the front end.
  • Unable to adjust column widths using the drag-and-drop handles.
  • Row layout blocks appear to span the full width instead of maintaining their set column structure.
  • Custom width percentages are not applied or reflected in the front-end display.

Why This Happens

These problems are typically caused by one of three factors: a plugin bug introduced in an update, a conflict with another plugin or theme, or custom CSS that overrides the plugin's default styling.

How to Fix It

1. Update the Plugin

The most straightforward solution is often to ensure you are running the latest version of Kadence Blocks. The development team is proactive about fixing bugs. For example:

  • A bug in version 3.2.20 that broke custom column widths was resolved in version 3.2.21.
  • An issue with the Advanced Button block's width after WordPress 6.8 was fixed in Kadence Blocks version 3.5.2.

Always check your plugin version and update if a newer one is available.

2. Perform Conflict Testing

If updating doesn't help, a conflict with your theme or another plugin is likely. To test for this:

  1. Switch Themes Temporarily: Activate a default WordPress theme like Twenty Twenty-Four. If the problem disappears, the issue is with your original theme.
  2. Deactivate Other Plugins: Deactivate all plugins except for Kadence Blocks. If the column layouts work correctly, reactivate your other plugins one by one to identify the one causing the conflict.

3. Check for Custom CSS

Custom code can sometimes interfere with how blocks are rendered. One user discovered their problem was self-inflicted: "My mistake was, that I overwrote the row element to display as a flex element instead of grid." Inspect your page using your browser's developer tools (DevTools) to see if custom CSS is overriding the default display: grid; styling on Kadence row layouts.

4. Adjust Column Number Setting

In one specific case, a user found a workaround for a non-functional width slider: "I found a bug, the slider does not work, if you select the number of columns... then everything works." If the drag handle is unresponsive, try manually selecting the number of columns in the block settings sidebar, which can sometimes re-enable the width adjustment functionality.

When to Seek Further Help

If none of the above steps resolve your issue, the problem may be more specific. When seeking help from the community, be prepared to provide:

  • The version numbers of WordPress, your theme, and Kadence Blocks.
  • A clear description of the problem and what you expect to happen.
  • A link to the page where the issue is visible.
  • Screenshots or a screen recording that visually demonstrates the problem.

Related Support Threads Support