Add margin space between columns in mobile Beaver layout

So, you have added multiple columns in a row using Beaver Builder plugin. They look all good and spaced out in the default browser view. However, when you switch to the smaller screen view – columns stick to each other without any space or margin between them. Also, they touch screen edges at the smallest screen view.

Margin space between columns on mobile layout in beaver builder
How to fix this?
Quick CSS code to the rescue!

Margin space between columns on smaller screen layout

1. Click “wrench” icon to open “Row Settings”.


2. Go to “Advanced” tab and then add unique class to this row (For example pro-col-margin-1) and click the “Save” button.

Add class to row to modify columns margin space
3. At top right, go to: Tools > Layout CSS / Javascript and add following code in the box.

Now preview layout on smaller screen device, columns with be space out beautifully without touching each other (vertically) or edges of the screen.

Davinder Singh Kainth

About Davinder Singh Kainth

Davinder loves creating and implementing online spaces. He has over a decade of experience reaching corners of: design, development, blogging and SEO. Learn more at


  1. Brenda on July 28, 2016 at 3:36 pm

    Very efficient. Thanks, Davinder.

  2. Colin on July 29, 2016 at 5:16 pm

    Fantastic, I think you may have solved an issue I was having with a site that has a grid pattern, Thanks Davinder.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.