Making Drag-and-Drop Multi-Column Sections Stack on Mobile – Custom Theme Update for Mautic 2.7

Attention, Mautic custom theme builders! If you want the new, drag-and-drop mult-column sections to be mobile-responsive, you’ll need to add some CSS to your theme. (Jump to the end of this post to grab the code.)

Without this CSS, a two or three-column section will not stack on mobile. Your user will have to scroll horizontally to see all of the columns. Not good.

Keep in mind that this applies only to multi-column sections that are added to a custom theme using the drag-and-drop builder. If you have an existing multi-column layout in your theme, it is not affected by this change. Speaking of changes….

What changed?

In Mautic 2.7, the email builder received a significant update. New slot types and new multi-column sections became available using the drag and drop builder.

It’s important to note that this CSS is not required for Mautic custom themes. But it is required if you want your users to be able to add multi-column sections to your theme using the builder – and have them stack on mobile.

The Mautic team published a short video on how to update your theme, but I wanted to share an example. Here’s a 2-minute video:

 

The CSS to add to your theme:

<style type="text/css" media="only screen and (max-width: 480px)">
  /* Mobile styles */
  @media only screen and (max-width: 480px) {

  [class="w320"] {
    width: 320px !important;
    }

  [class="mobile-block"] {
    width: 100% !important;
    display: block !important;
    }
  }
</style>