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:

.align-sm-center {
  display: table!important;
  float: none;
  margin-left: auto!important;
  margin-right: auto!important;
}
.align-sm-left {float: left;}
.align-sm-right {float: right;}

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: the logo image and the menu table are using the align-sm-center utility class.