BugWP logo BugWP
Back to Community
Home / Community / Plugin → Page builder gutenberg blocks – coblocks

How to Fix Column and Button Alignment Issues in CoBlocks

22 threads Sep 16, 2025 Plugin → Page builder gutenberg blocks – coblocks

Content

Alignment issues within columns are a common challenge for users of the Page Builder Gutenberg Blocks – CoBlocks plugin. These problems often manifest as buttons that won't center, content that won't align vertically, or columns that don't maintain equal height. This guide will explain why these issues occur and provide the most effective solutions.

Why Alignment Issues Happen

CoBlocks extends the core Gutenberg editor with advanced layout blocks. However, some alignment controls are dependent on future WordPress core updates. For instance, Thread 18 reveals that vertical alignment settings are pending the official release of a Gutenberg component. Furthermore, the plugin uses its own set of CSS classes and default styles, which can sometimes conflict with a theme's existing styles, especially on mobile devices where responsive breakpoints come into play (as seen in Threads 12 and 13).

Common Solutions for Alignment Problems

1. Using Custom CSS (The Most Common Fix)

The most frequent solution provided by the CoBlocks support team is adding small snippets of custom CSS. This allows for precise targeting of specific blocks on a page.

  • For Service Block Button Alignment (Thread 16): To align buttons in a Services block, you might need CSS targeting the specific block class, such as div.wp-block-coblocks-service__content.
  • For Features Block Vertical Alignment (Thread 15): To align content to the top in a Features block, you can use: .wp-block-coblocks-feature{ justify-content:inherit; }
  • For Mobile-specific Issues (Thread 12): Use media queries to apply CSS only on mobile devices. For example: @media (max-width: 768px) { /* Your mobile CSS here */ }

How to add CSS: Navigate to Appearance → Customize → Additional CSS in your WordPress dashboard and paste the code there. For site editors, go to Appearance → Editor → Styles → Additional CSS.

2. Structural Workarounds Within the Editor

Sometimes, the desired layout can be achieved by structuring your content differently within the editor.

  • Adding Multiple Blocks to a Column (Thread 1): If the '+' inserter isn't visible, click the three dots on an existing block and choose 'Insert After' to add another block.
  • Using Nested Rows (Thread 20): For complex layouts, such as placing an icon inline with a heading, try nesting a 2-column Row block inside another column.

3. Awaiting Core Features

For some issues, like native vertical alignment for rows and columns (Threads 7 & 18), a fix is dependent on WordPress core development. The CoBlocks team has indicated they will implement these features once the necessary components are available in Gutenberg.

Conclusion

While CoBlocks is a powerful tool for creating complex layouts, achieving perfect alignment often requires a combination of creative block structuring and custom CSS. For persistent problems, checking the plugin's GitHub repository for existing issues or feature requests can provide insight into whether a fix is in development.

Related Support Threads Support