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;">

因此，wrapper-fix类的选择器应定位到适当的div及其子对象

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

在移动屏幕上隐藏包装器

1 个答案: