Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Zoho Mail - No Column stacking #2931

Open
mauricio-lima-web opened this issue Jan 14, 2025 · 2 comments
Open

Zoho Mail - No Column stacking #2931

mauricio-lima-web opened this issue Jan 14, 2025 · 2 comments

Comments

@mauricio-lima-web
Copy link

mauricio-lima-web commented Jan 14, 2025

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
Zoho Mail

Outlook = perfect
Outlook

<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
Copy link
Member

iRyusa commented Jan 14, 2025 via email

@mauricio-lima-web
Copy link
Author

mauricio-lima-web commented Jan 14, 2025

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants