• ProBeaver Weekly
    Weekly for all things Beaver

  • Center align, left or right aligned text in mobile Beaver Builder layout

    So, you have left or right aligned text in a “text editor” widget and want it to appear center aligned when viewed on smaller mobile layout. There is no default setting in the Beaver Builder for this. However, you can easily implement this using quick CSS.

    Default desktop view (left or right aligned text)

    left-to-center-desktop-beaver

    Mobile view (center aligned text)

    left-to-center-mobile-beaver

    Center align text editor text in mobile layout

    Note: Make sure text within “text editor” widget is “not” left – center – right aligned using inline alignment option (like selecting text and clicking left – center – right buttons on the editor toolbar).

    1. While in the “Beaver Builder” mode, click “add content” button. Then drag and drop “text editor” (under “Basic Modules” section) to the layout.

    left-to-center-mobile-1

    2. Add text to the “text editor” box and click on “Advanced” tab. Add a unique class like mobile-left-center to it. Then save changes.

    left-to-center-mobile-2

    3. Add following CSS code in the CSS box on the same page or add it to the style.css file of your child theme.

    mobile-left-center class will make left aligned text, center aligned in the mobile layout. While, mobile-right-center class will make right aligned text, center aligned in the mobile layout.

    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

    2 Comments

    1. Chinmoy Paul on September 7, 2016 at 7:30 pm

      Great tut.

      Just a friendly suggestion: Replace the post ID with the permalink at @link line.

    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