Skip to content
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
66 lines (53 sloc) 2.49 KB




mj-group allows you to prevent columns from stacking on mobile. To do so, wrap the columns inside a mj-group tag, so they'll stay side by side on mobile.

          <mj-image width="137px" height="185px" padding="0"    src="" />
          <mj-text align="center">
            <h2>Easy and quick</h2>
            <p>Write less code, save time and code more efficiently with MJML’s semantic syntax.</p>
          <mj-image width="166px" height="185px" padding="0" src="" />
          <mj-text align="center">
            <p>MJML is responsive by design on most-popular email clients, even Outlook.</p>

try it live

Column inside a group must have a width in percentage, not in pixel You can have both column and group inside a Section iOS 9 Issue: If you use a HTML beautifier for MJML output, iOS9 will render your columns inside a mj-group as stacked. On the output HTML, remove the blank space between the two columns inside a mj-group.
attribute unit description default attributes
width percent/px group width (100 / number of non-raw elements in section)%
vertical-align string middle/top/bottom top
background-color string background color for a group n/a
direction ltr / rtl set the display order of direct children ltr
css-class string class name, added to the root HTML element created n/a
You can’t perform that action at this time.