---
title: "How to Fix Unequal Column Height in WordPress (Gutenberg) – Equal Heights [Video Tutorial]"
url: https://nexterwp.com/docs/fix-unequal-column-height-wordpress-gutenberg/
date: 2023-07-05
modified: 2026-04-14
author: "Aditya Sharma"
description: "https://www.youtube.com/watch?v=9vPXwL18Los Video Duration: 6 : 50 Video Overview Learn how to fix Equal Height in WordPress Gutenberg sites using Nexter Blocks.We will make all the columns of same height regardless..."
image: https://nexterwp.com/wp-content/uploads/2024/05/fix-unequal-column-height-wordpress-gutenberg-1024x519.jpg
word_count: 97
---

# How to Fix Unequal Column Height in WordPress (Gutenberg) – Equal Heights [Video Tutorial]

## Key Takeaways

- Nexter Blocks fixes unequal column height in WordPress Gutenberg sites using simple CSS selectors.
- Equal height columns enhance design consistency and provide an elegant look to websites.
- The video tutorial lasts 6 minutes and 50 seconds, demonstrating the process visually.

https://www.youtube.com/watch?v=9vPXwL18Los

##### Video Duration: 6 : 50

## Video Overview

Learn how to fix Equal Height in WordPress Gutenberg sites using Nexter Blocks.
We will make all the columns of same height regardless of any content length using simple CSS selector.

This can make blog, WooCommerce Product, CPT posting listing equal, pricing table equal, info box equal and much more.
Making WordPress columns of same height makes the design consistent and gives an elegant look to websites.

▶️ Live Demo - [https://nexterwp.com/nexter-blocks/extras/wordpress-same-equal-height/](https://nexterwp.com/nexter-blocks/extras/wordpress-same-equal-height/)

⚡ Plugin Website - [https://nexterwp.com/](https://nexterwp.com/)
⚡ Get the Plugin [https://nexterwp.com/nexter-blocks/](https://nexterwp.com/nexter-blocks/)
USE CODE " YOUTUBE10 " TO ENJOY 10% DISCOUNT

## Frequently Asked Questions

**Q: What should I do if the CSS selector doesn't fix the unequal column height?**
A: If the CSS selector doesn't resolve the unequal column height, double-check that you've applied the correct CSS to the right elements. Ensure that all columns are targeted properly in your CSS. Sometimes, conflicting styles from other CSS files can override your settings. Use browser developer tools to inspect the elements and identify any conflicting styles.

**Q: What is the best practice for applying equal height columns in a blog layout?**
A: The best practice for applying equal height columns in a blog layout is to use a simple CSS selector that targets all columns you want to equalize. This ensures that regardless of content length, all columns will display uniformly. Consistent column heights improve readability and aesthetic appeal, making your blog look more professional.

**Q: How can I check if my changes to column height are effective?**
A: To check if your changes to column height are effective, refresh your webpage after applying the CSS selector and inspect the columns visually. Use browser developer tools to confirm that the CSS is applied correctly and that the heights are equal. If they aren't, revisit your CSS code for any errors or conflicts.

**Q: Are there any limitations to using CSS for equal height columns?**
A: One limitation of using CSS for equal height columns is that it may not work as expected in all responsive layouts, especially on smaller screens. You might need to add media queries to adjust the styles for different screen sizes. Additionally, overly complex layouts may require more advanced CSS techniques or JavaScript for better results.