HTML 电子邮件移动响应

Question

我已经创建了 HTML 电子邮件，一切正常，但有些部分我使用内联 css(填充:0 36px 15px 140px)在文本之前有一个空白部分。在桌面上看起来一切都很好，但是当我在移动设备上打开它时，长线显示为两行，因为左侧的 140px padding 对他们来说太大了。我该如何解决这个问题？

这是我到目前为止尝试过的:

<style type="text/css">


    @media screen and (max-width: 525px) {


    .smaller {
        padding: 0px 36px 15px 100px;
    }

<td style="padding: 0px 36px 15px 140px; font-size: 16; font-family: Helvetica; font-weight: bold;" class="smaller">

所以我声明了一个针对较小设备的媒体查询，然后我尝试将其应用到类中，但填充没有改变。我怎样才能做到这一点？样式在头部，我应该把它放在其他地方吗？

Answer 1

尝试添加 !important，它会覆盖您的 inline-style

@media screen and (max-width: 525px) {

    .smaller {
        padding: 0px 36px 15px 100px !important;
    } 
}