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