MJML template rendering incorrectly on mobile

Question

I am currently using MJML-sandbox to render some icons.

The code snippet I am testing is:

    <mj-section>
      <mj-column padding="0" padding-top="30px">
        <mj-image src="https://www.gstatic.com/webp/gallery/1.jpg" href="https://mjml.io" width="32px" padding="4px" align="left" />
      </mj-column>
      <mj-column padding="0" width="49%" padding-top="30px">
        <mj-social font-size="15px" icon-size="30px" mode="horizontal" padding="0" align="right">
          <mj-social-element name="facebook" href="https://mjml.io/">
          </mj-social-element>
          <mj-social-element name="google" href="https://mjml.io/">
          </mj-social-element>
          <mj-social-element name="twitter" href="https://mjml.io/">
          </mj-social-element>
          <mj-social-element name="twitter" href="https://mjml.io/">
          </mj-social-element>
          <mj-social-element name="twitter" href="https://mjml.io/">
          </mj-social-element>
        </mj-social>
      </mj-column>
    </mj-section>

Desktop view:

Mobile view:

When on desktop view, the icons render in a single row(what is expected), but when on mobile view, the icons on the right wrap to the next row. How do I fix this? (Using Safari browser, to test how it renders on IOS.)

Answer 1

Apparently wrapping mj-group around the columns fixes this issue.

<mjml>
  <mj-body>
      <mj-section>
        <mj-group>
          <mj-column padding="0" width="13%" padding-top="30px">
        <mj-image src="https://www.gstatic.com/webp/gallery/1.jpg" href="https://mjml.io" width="32px" padding="4px" align="left" />
      </mj-column>
      <mj-column padding="0" width="85%" padding-top="30px" css-class="center-content-on-mobile">
        <mj-social font-size="15px" icon-size="30px" mode="horizontal" padding="0" align="right">
          <mj-social-element name="facebook" href="https://mjml.io/">
          </mj-social-element>
          <mj-social-element name="google" href="https://mjml.io/">
          </mj-social-element>
          <mj-social-element name="twitter" href="https://mjml.io/">
          </mj-social-element>
          <mj-social-element name="twitter" href="https://mjml.io/">
          </mj-social-element>
          <mj-social-element name="twitter" href="https://mjml.io/">
          </mj-social-element>
        </mj-social>
      </mj-column>
     </mj-group>
    </mj-section>
  </mj-body>
</mjml>