Zoho Mail - No Column stacking

[mauricio-lima-web]

Column stacking is not working on Zoho Mail. The render looks like the mobile version. The same test was done sending via Putsmail. The problem occurs when receiving the email to Zoho Mail and sending via Zoho Mail.

Zoho Mail doesn't stack the columns

Outlook = perfect

<mjml lang="pt-br">
  <mj-head>
  <mj-breakpoint width="400px" />
    <mj-attributes>
      <mj-class name="divider" border-bottom="1px solid lightgrey" />
      <mj-class name="fst-column" font-weight="bold" />
      <mj-class name="row" padding="5px" />
      <mj-class name="first-column" padding="0" width="40%" /><mj-class
        name="second-column"
        padding="0"
        width="60%" /><mj-all
        font-family="Arial, sans-serif"
        letter-spacing="0.01em" />
      <mj-class name="table" font-size="large" /></mj-attributes
  ></mj-head>
  <mj-body background-color="#C4F6FF">
    <mj-section>
      <mj-column
        ><mj-image
          src="https://antina.com.br/img/logo-transp.png"
          width="90px"
          alt="Antina logo"
        />
        <mj-text align="center" font-size="xx-large">
          <h1 style="line-height: 1; letter-spacing: -0.02em; margin: 0">
            Novo cliente
          </h1>
          <p style="line-height: 1.2; font-size: x-large">
            Entre em contato com o novo cliente <br />
            o mais breve possível.
          </p>
        </mj-text>
      </mj-column> </mj-section
    ><mj-wrapper background-color="#fff" border-radius="25px" padding="20px" width="">
      <mj-section mj-class="divider row">
        <mj-column mj-class="first-column">
          <mj-text mj-class="fst-column table">Tipo de serviço</mj-text>
        </mj-column>
        <mj-column mj-class="second-column">
          <mj-text mj-class="table">Design</mj-text>
        </mj-column></mj-section
      ><mj-section mj-class="divider row">
        <mj-column mj-class="first-column">
          <mj-text mj-class="fst-column table"> Tipo de website</mj-text>
        </mj-column>
        <mj-column mj-class="second-column">
          <mj-text mj-class="table"> Landing page</mj-text>
        </mj-column> </mj-section
      ><mj-section mj-class="divider row">
        <mj-column mj-class="first-column">
          <mj-text mj-class="fst-column table">Mensagem</mj-text>
        </mj-column>
        <mj-column mj-class="second-column">
          <mj-text mj-class="table"> Texto</mj-text>
        </mj-column> </mj-section
      ><mj-section mj-class="divider row">
        <mj-column mj-class="first-column">
          <mj-text mj-class="fst-column table">Nome</mj-text>
        </mj-column>
        <mj-column mj-class="second-column">
          <mj-text mj-class="table">Maurício</mj-text>
        </mj-column> </mj-section
      ><mj-section mj-class="divider row">
        <mj-column mj-class="first-column">
          <mj-text mj-class="fst-column table">Sobrenome</mj-text>
        </mj-column>
        <mj-column mj-class="second-column">
          <mj-text mj-class="table">Lima</mj-text>
        </mj-column> </mj-section
      ><mj-section mj-class="row">
        <mj-column mj-class="first-column">
          <mj-text mj-class="fst-column table">E-mail</mj-text>
        </mj-column>
        <mj-column mj-class="second-column">
          <mj-text mj-class="table">[email protected]</mj-text>
        </mj-column>
      </mj-section>
    </mj-wrapper>
    <mj-spacer height="40px" /></mj-body
></mjml>

MJML Version 4.9.3

[iRyusa]

This email client is not in our test scope and most likely doesn’t support media query.You shouldn’t use column as a table, just use a regular html table for that it would produce way less html and prevent some clipping issue in some client On 14 Jan 2025, at 01:50, Maurício Lima ***@***.***> wrote: Column stacking is not working on Zoho Mail. The render looks like the mobile version. The same test was done sending via Putsmail. The problem occurs when receiving the email to Zoho Mail and sending via Zoho Mail. Outlook = perfect Outlook.png (view on web) Zoho Mail doesn't stack the columns Zoho.Mail.png (view on web) ` </mj-attributes Novo cliente Entre em contato com o novo cliente o mais breve possível. Tipo de serviço Design Tipo de website Landing page Mensagem Texto Nome Maurício Sobrenome Lima E-mail ***@***.*** ` MJML Version 4.9.3 —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[mauricio-lima-web]

I deleted my Zoho account. Could you recommend me how I use table instead of column? Tables don't stack in MJML, just columns

[iRyusa]

Just use a mj-table or a html table in mj-text it's basically the same https://documentation.mjml.io/#mj-table