ProBeaver Weekly
Weekly for all things Beaver

Center align, left or right aligned text in mobile Beaver 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 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)

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

  2. Sascha on February 17, 2017 at 10:28 am

    Hi, very helfull, thanks!

  3. Andrew on August 16, 2017 at 2:50 pm

    Question. How would you do this with an image, easily. For example, I’m using a logo in Themer and I have added CSS to set a max width, like:

    .header-logo {
    max-width: 200px;
    }

    Only I noticed on mobile it jumps to the center now. How I can ensure it stays on the left?

Leave a Comment





showcase-websites-front-1

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