ProBeaver Weekly
Weekly for all things Beaver

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”.

background-image-color-row-1

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. He also create products at SimpleProThemes(.com), WordPress learning at BasicWP(.com) & digital solutions at iGuiding(.com)

4 Comments

  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





showcase-websites-front-1

Submit Beaver Builder built websites to feature in the "showcase" section on ProBeaver