• ProBeaver Weekly
    Weekly for all things Beaver

  • Change row background image to color for Mobile layout in Beaver Builder

    One can add background image in different orientations to any row in the Beaver Builder plugin. While background image on a row looks amazing in full desktop view, it may look little out of the place for smaller screen devices.

    background-image-color-row-0

    So, what is the fix?
    How about switching background image with background color of smaller screen device layout?

    Background image to color on smaller screen devices

    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-row-bg-1) and click the “Save” button.

    background-image-color-row-2

    3. At top right, go to: Tools > Layout CSS / Javascript and add following code in the box.

    4. This will replace background image with background color for smaller screen mobile device users.

    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

    6 Comments

    1. Dave on July 28, 2016 at 2:24 pm

      Thanks, Davinder, even an old dummy like me can understand this. You Rock!

    2. Edward Morgan on July 28, 2016 at 5:18 pm

      Thanks will be using this

    3. Paul Pyle on August 6, 2016 at 2:16 am

      Thank you Davinder for teaching me new tricks!

    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