Custom align elements on mobile

It often happens that you need to align elements differently for mobile in your emails. For example, maybe you have a left-aligned logo image that you want centered on mobile. Pine's alignment responsive utilities make it easy to do so.

The following classes are available inside Pine's @media query:

You can add them to any element you need aligned differently on mobile. Keep in mind that, depending on your layout, the left/right alignment classes might cause issues, as they are using float, which takes the element out of the normal flow.

Check out the Navigation component - both the logo image and the menu table are using the align-sm-center class.

Next Up: Display →

Current Version