mjml-group

mjml-group

Desktop

Mobile

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.

<mjml>
  <mj-body>
    <mj-container>
      <mj-section>
        <mj-group>
          <mj-column>
            <mj-image width="137px" height="185px" padding="0" src="https://mjml.io/assets/img/easy-and-quick.png" />
            <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-text>
          </mj-column>
          <mj-column>
            <mj-image width="166px" height="185px" padding="0" src="https://mjml.io/assets/img/responsive.png" />
            <mj-text align="center">
              <h2>Responsive</h2>
              <p>MJML is responsive by design on most-popular email clients, even Outlook.</p>
            </mj-text>
          </mj-column>
        </mj-group>
      </mj-section>
    </mj-container>
  </mj-body>
</mjml>

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 sibling in section)%
vertical-align	string	middle/top/bottom	top
background-color	string	background color for a group	n/a