如何在移动设备上隐藏用 MJML 编写的 HTML 电子邮件中的列？

Question

有没有办法在手机屏幕上隐藏

mj-column

？

这是我尝试过的。虽然媒体查询适用于单个元素，例如

p

中的

mj-text

元素（成功将其更改为在移动屏幕上右对齐），但它不适用于

mj-column

（社交元素在移动屏幕上仍然可见）。

https://mjml.io/try-it-live/qOsRwzQ-lP

<mjml>
  <mj-head>
    <mj-style>
      @media (max-width:480px) {
        .hidden {
          display: none;
        }
      }
      @media (max-width:480px) {
        .mobile {
          text-align: right;
        }
      }
    </mj-style>
  </mj-head>
  <mj-body>
    <mj-container>
      <mj-section background-color="#eee">
        <mj-column>

          <mj-text>
            <p class="mobile">Title align right on mobile</p>
          </mj-text>

        </mj-column>
        <mj-column css-class="hidden">
            <mj-social font-size="15px" icon-size="30px" mode="horizontal">
              <mj-social-element name="facebook" href="https://mjml.io/">
                Facebook
              </mj-social-element>
              <mj-social-element name="google" href="https://mjml.io/">
                Google
              </mj-social-element>
              <mj-social-element  name="twitter" href="https://mjml.io/">
                Twitter
              </mj-social-element>
            </mj-social>
        </mj-column>
      </mj-section>
    </mj-container>
  </mj-body>
</mjml>

Answer 1

试试这个：

<mjml>
  <mj-head>
    <mj-style>@media (max-width:480px) {
      .mj-column-per-50 {
      display: none !important;
      }
      }
      @media (max-width:480px) {
      .mobile {
      text-align: right;
      }
      }</mj-style>
  </mj-head>
  <mj-body>
    <mj-section background-color="#eee">
      <mj-column>
        <mj-text>
          <p class="mobile">Title align right on mobile</p>
        </mj-text>
      </mj-column>
      <mj-column css-class="hidden">
        <mj-social font-size="15px" icon-size="30px" mode="horizontal">
          <mj-social-element name="facebook"></mj-social-element>
          <mj-social-element name="twitter"></mj-social-element>
          <mj-social-element name="google"></mj-social-element>
        </mj-social>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

仅供参考：检查员可以为您提供如何隐藏它的线索。

https://mjml.io/try-it-live/PwNkKZSlR2