4.5.2 • Published 4 years ago

mjml-group-fix v4.5.2

Weekly downloads
4
License
MIT
Repository
github
Last release
4 years ago

mjml-group

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-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-body>
</mjml>
attributeunitdescriptiondefault attributes
widthpercent/pxgroup width(100 / number of non-raw elements in section)%
vertical-alignstringmiddle/top/bottomtop
background-colorstringbackground color for a groupn/a
directionltr / rtlset the display order of direct childrenltr
css-classstringclass name, added to the root HTML element createdn/a