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: