隐藏在手机屏幕上的包装纸

Question

我试图在移动屏幕上“隐藏”包装器“”，不是通过实际隐藏或“不显示”，而是通过将填充设置为0px。我最初的方法是使用媒体查询，但是我的尝试失败了。

下面是媒体查询的样式：

<mj-head>
  <mj-style>
    .wrapper-fix div {
        padding: 0px 50px !important;
    }
    @media only screen and (max-width: 480px){
      .wrapper-fix div {
        padding: 0px 0px !important;
        }
    }
  </mj-style>
</mj-head>

下面是包装器：

<mj-wrapper css-class="wrapping-fix" background-color="#fff">
  <mj-include path="./somecontent.mjml" />
</mj-wrapper>

以上方法无效。我的理解是，内联后将50 / 0px添加到标签-电子邮件的实际html内容。那里确实不存在。

有人能做到这样吗？如何解决？有其他选择吗？

Answer 1

查看MJML生成的代码，您可以看到在嵌套的<td>中设置了包装器填充，并且包装器的css-class属性仅应用于过时的div元素，而不应用于<td>本身：

 <mj-wrapper css-class="wrapper-fix" padding="0px 25px" background-color="#FFFFFF">

成为：

 <div class="wrapper-fix" style="background:#FFFFFF; (...) ">
  <table align="center" border="0" cellpadding="0" (...) ">
    <tbody>
      <tr>
        <td style="direction:ltr;font-size:0px;padding:0px 25px;text-align:center;">

因此，包装器修复程序类的选择器应定位到适当的div及其子对象

div.wrapper_fix > table > tbody > tr > td {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }