In this tutorial I will show you how to create equal height columns in the Infinity Pro theme by StudioPress.
The Infinity Pro theme is beautiful and can be used right out of the box as long as you make you site exactly like the demo. Section 4 has a title called Features and below the title is a grid of boxes.
If the amount of text you put in the boxes are all the same you will have no problem and your site will behave just like the demo.
But when the text in the columns of this section are different, you might get something that does not look so good.
You can play around and try to fix this with by modifying the CSS height or by implementing a Flex-box. But there is a much easier way.
You can use a Plugin called Equal Height Columns by MIGHTYminnow.
This plugin is awesome, it will make your columns have an equal height with just a couple of clicks of the mouse.
Well enough of the introduction, Let’s get started.
Step 1
Navigate to your WordPress Dashboard and click on plugins.
Next go ahead and click on Add New.
Now go ahead and search for a plugin called Equal Height Columns by MIGHTYminnow.
Install and activate the plugin.
Step 2
In order to make the columns equal height, we need to target them by finding what class has been assigned to them.
This is easily done. Go to your browser. I am using Google Chrome, I suggest you do the same if you want to follow along with me.
Now scroll down to the section where you have the columns. Hover your cursor over one of the columns and right click and select inspect.
You will notice that as you move your cursor over the window that just appeared that different lines get highlighted. In this case the line that we are looking for has a class of content-box.
Double click on it to select it and then copy the text.
Step 3
Go ahead and go back to your Dashboard and click on Settings and then on Equal Height Columns.
A new window will appear. In this new window you will find a box with the word “Selector” to the left of if.
Paste the class you copied in the previous step into this box. The text in the box should read .content-box
The next thing that we have to do is to change the breakpoint so that it works correctly for the infinity pro theme.
Go ahead and change the breakpoint to 800.
Click on save changes and then go back to your web page and have a look at your gorgeous equal height columns.
Were you expecting it to be harder? That’s all there is to it.
Well I hope you found this tutorial helpful and would love to hear how things worked out for you. Drop me a comment and tell me about your experience.
Leave a Reply