There may be times when it looks better to have your content — like a paragraph, heading, or something else — left aligned on desktop/laptop versions of your website, but center aligned on mobile.

To do that, you just need to add an additional class to the individual element, or the group block.

HOW TO DO IT:

OPTION 1. Add Additional Class To Container Block

• If you want to center align multiple elements, you can apply the class to a group or column block to the column or group block.
• Select the block, then scroll down in the Block Settings panel until you reach Advanced >> Additional CSS class(es).
• Add the class mobile-center in this space:

Optional 2. Add Additional Class to Individual Block

• If you only want to target an individual element — not an entire group/column of them — you can scroll down in the Block Settings panel until you reach Advanced >> Additional CSS class for that block.
• Add the class mobile-center in this space (same as screenshot above).

WHAT TO KNOW:

• This method will work for most blocks, but not all (for example, “row” blocks are not affected)
• Test, test, test! Use your web browser’s Developer Tools to simulate what your website will look like on different screen sizes.