In order to set all the columns within one row to be equal in height, you need to navigate to the row settings window in page options and tick the Equal height option box. All columns within this row will have equal height and align with the longest column.
Of course you can add as much columns as you want
After doing this, all the columns in that row will have the same height and like stated above the columns will have equal height and align with the longest column.
However you should be mindful that content in the columns (which you will add) can have various heights, and for this reason you can set up the Design Options to achieve a better alignment for each of the columns:
However, this feature is disabled on some of our themes, since these options are in conflict with some of our scripts included within certain themes. With these themes, in order to achieve an equal height for columns you can use a shortcode we developed – the Elements Holder.
You can try doing the following:
- Add the Elements Holder shortcode to your page. Within it, you can set the number of columns you want to have in the row.
The option labels might differ from the ones pictured here
- Click on the plus sign inside the Elements Holder in order to add Elements Holder Items inside it.
The number of Elements Holder Items you add should correspond to the number of columns you selected in step 1.
- You can add content to the columns by clicking on the plus icons found inside the Elements Holder Items.
- Click on the pencil icon above the Elements Holder Item in order to open up an options panel for that particular column.
Here you’ll find several settings, including the option to add padding. The four padding values correspond to top, right, bottom, and left padding, respectfully. The values can be entered in either pixels or percentages.
Click on the Width & Responsiveness tab if you want to set different padding values for different screen sizes. The widest screens (over 1600 pixels) inherit the padding values set in the General tab.
