Tutorial & code

Responsive Grids

A simple CSS tweak to give more flexibility creating responsive grids using Beaver Builder columns.

Minimum BB plugin required:      Saved under:  
Skill level:     Contributor: 

Template Location

Bj Custom Layout Nav

Video

Notes

When we add Beaver Builder columns to our pages we are adding column groups. They display as show on desktop devices, but by default stack as columns on columns on tablets and mobiles.

If we want a more flexible grid we can add 6 columns and duplicate them to up to 12. With the CSS  (below) we can turn these in to a grid on desktop and use the Beaver Builder column settings to arrange things different on smaller sizes.
Columns.fw

See the Responsive Grids template in action.

Code

CSS

/* This makes a 12 column group display as 2 x 6 on desktop.
It's targeting the individual columns in the row
allowing other columns to be added without being affected*/

@media (min-width: 992px){
.column-one, .column-two, .column-three, .column-four, .column-five, .column-six,
.column-seven, .column-eight, .column-nine, .column-ten, .column-eleven, .column-twelve {
width: 16.66%!important;
}
}

/* 3 = 33.33% 4 = 25% 5 + 20% 6 + 16.66% */

If you want the above to apply to all columns in a row you add a row selector and use this instead: 

@media (min-width:992px){/* 992px is BB default width */
.row-selector-name .fl-col {
width: 20% !important;
}
}

Can you improve this template?

We'd love it if you can so please comment and share.

For help please post to the Beaver Builder Beginners Facebook group or the YouTube video with this post.

3 Comments

  1. Carmelina M on March 4, 2021 at 2:22 pm

    Hi David, Thank you for this! I’m having an issue however where the columns don’t stack correctly if the content of each is different heights. That is, only where the content for the first three columns is the same height, will the 4th column then float all the way over to the right. If the columns are different heights, instead of stacking masrony style, the 4th row appears below the third row and then the 5th column floats over to the right. Is there some further CSS rule to get the columns to float correctly when the content is different heights?

    • David Waumsley on March 4, 2021 at 5:02 pm

      Ah yes I guess it would Carmelina. Would it not work for you to set the columns to equal heights so even if the content is not equal the columns are?

  2. Carmelina M on March 4, 2021 at 6:03 pm

    That worked! Thanks, David. 🙂

Leave a Comment