• 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 love creating and implementing online spaces. He has over a decade of experience reaching corners of: design, development, blogging and SEO. He also create digital products at SimpleProThemes.com and 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





  • Pro Stuff

    for  Beaver Builder

    Pro Styles for Beaver

    Customize Beaver Builder Modules beautifully with pre-made CSS packs

    Creative9

    A premium modern agency template for Beaver Builder users