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.Beaver Builder Pricing Table Uneven Buttons

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.

Beaver Builder Pricing Table Min Height

Beaver Builder Pricing Table Min Height Responsive.fw

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; ).
david-waumsley-web-developer-150x150-circle

David Waumsley

A British chap who helps with websites and whatnot.  Some refer to him as a digital nomad, but he will accepts the term "fugitive" or "international bag lady".  He actually builds websites for a living. Yeah, I know!

Leave a Comment