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.

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.

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.