Get The Plugin
Account Login

Divi Hacks Plugin

Examples & Documentation

Device-Specific Alignment

These classes allow you to align rows, modules, and text differently on desktops, tablets, and phones.

USAGE

Set the desktop settings using the normal settings in the row or module settings. Then add any of the following classes to customize alignment on tablet and phone.

    ROW ALIGNMENT

    Add these to rows:

    MODULE ALIGNMENT

    Add these to modules:

    TEXT ALIGNMENT

    Add these to modules:

    Row Alignment Examples

    Row Alignment

    tablet-row-align-left    phone-row-align-right

    This row is centered on desktop using the normal alignment settings for the row.

    On tablets, this row is aligned to the left.

    On phones, this row is aligned to the right.

    Row Alignment

    tablet-row-align-center    phone-row-align-left

    This row is aligned to the right on desktop using the normal alignment settings for the row.

    On tablets, this row is aligned to the center.

    On phones, this row is aligned to the left.

    Module Alignment Example

    This blurb is aligned to the center on desktop

    tablet-module-align-right
    phone-module-align-left

    Text Alignment Example

    This text is aligned to the left on desktop, right on tablet, and center on mobile using the following classes:

    • tablet-text-align-right
    • phone-text-align-center

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.