• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WriteNowDesign - Wordpress and Ecommerce Website Design

WordPress, Joomla, Ecommerce Website Design

  • Home
  • Prices/Packages
  • WordPress
  • Services
  • Portfolio
  • Blog
  • About
    • Testimonials
    • Locations
    • Online Payment
  • Contact
  • Show Search
Hide Search

Call 303-907-6133 Email

Equal Height Columns in WordPress

Create Equal Height Columns in WordPress

October 16, 2015 by Pat Fortino

I recently spent about 3 hours implementing a jquery script to create equal height columns in WordPress. It was a great learning experience, but if you’re more interested in creating equal height columns now, the following turtorial will help. Also see Use Flexbox to Create Equal Height Columns

With the Equal Height Columns plugin, you can easily create equal height columns in your WordPress template or a post or page.

Install the Plugin

  • Install the Equal Height Columns plugin and Activate it.
    See How to Install WordPress Plugins

To install plugins

  • From the WordPress admin menu, go to Plugins > Add New
  • Enter the plugin name in the Search Plugins field and click Enter.
  • Click Install Now for the appropriate plugin. The plugin with download and install.
  • Click Activate.

Configure the Plugin

  1. Once Equal Height Columns is installed, go to Settings > Equal Height Columns.Equal Height Columns Plugin Settings Screen
  2. Enter a selector in the Selector field. In my example, it’s .footer-widgets .widget-wrap. The reason I have to include the .footer-widgets selector / div is because .widget-wrap occurs in other areas of the page and I don’t want the .widget-wrap selector to have equal column heights except when it occurs inside the .footer-widgets div. See the image below.Equal Footer Columns
  3. To find the selector in Firefox, Chrome, or Safari, right click on the column and select Inspect Element. That will launch the Web Inspector in the bottom of your browser screen.
    In Chrome, Safari, or Firefox, right click to use the web inspector
  4. Click Save Changes and then reload the page. Your columns should be equal height. In my example site, the footer columns are equal and the Equal Height Columns plugin added a height style to the .widget-wrap selector. See the image below.Columns Equal Height After
  5. If your columns are not equal height, then you probably used the wrong selector. Keep experimenting until you get it.

Filed Under: WordPress, Wordpress How To Leave a Comment

Previous Post: « WordPress Contact Form Won’t Send Email
Next Post: How to Add a Facebook Timeline to WordPress »

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related

Primary Sidebar

Blog Categories

Call Today

Get a Free Quote

303-907-6133

Subscribe to News

News about WordPress, WooCommerce, & Technology

What’s New

  • WPForms Not Sending Notifications
  • Add Terms and Conditions WooCommerce
  • Fix WordPress AMP Validation Errors
  • Use the Classic Editor with Gutenberg Block Editor
  • Add a Message at Top or Bottom of WooCommerce Checkout Page
  • How to Link to a PDF in WordPress

Find Us On…

  • Facebook
  • LinkedIn
  • RSS

Call 303-907-6133 Email

© 2004–2023 · WriteNowDesign · Sitemap · Log in · Return to Top

 

Loading Comments...