Equal Height Pricing Tables With A Responsive Tweak
This is a quick fix for those who want equal height columns on their Pricing Tables, but don’t want unnecessary white space on mobile views.
Beaver Builder Default
By default the Beaver Builder Pricing Table will adjust the height of each column according to the number of number of features it contains. When there is a variation of features this can make things looks uneven.
Features Min Height
Fortunately, Beaver Builder offers a solution which is the “Features Min Height” field. under the style tab. Here you can set a minimum height (in pixel) for all columns and make the equal. The call to action buttons remain aligned to the bottom. The space is added after the last feature on the shorter columns.
Responsive Tweak
On small devices (by default those with a browser width less than 768px) the table columns stack on top of each other, but they retain the minimum heights set.
To mobile users the extra space (set for desktop users) make less sense, but you can remove minimum height for mobile with this CSS:
The CSS
@media (max-width: 768px) { .fl-builder-content .fl-module-pricing-table .fl-pricing-table-features { min-height: 0; } }
Notes:
- min-height: 0 is the CSS default.
- This should work on all pricing table regardless of where you put the CSS.
- If using the the Beaver Builder code settings plugin you only need the last selector (.fl-pricing-table-features)
- If you need to isolate one you can add your own selector to the advance tab of the module and should be able to use it instead of these two: .fl-builder-content .fl-module-pricing-table. These were added to give greater specificity, but I could have used !important (ie. min-height: 0 !important; ).