HTML电子邮件移动响应

我已经创建和HTML电子邮件，它都可以正常工作，但有一些地方我使用内联css（padding：0 36px 15px 140px）在文本前有一个空白部分。这在桌面上看起来很不错，但是当我在移动设备上打开它时，长行显示为两行，因为左侧的140px填充对于它们来说太大了。我该如何解决这个问题？HTML电子邮件移动响应

这是我到目前为止已经试过：

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

所以我声明了一个媒体查询为较小的设备，然后我尝试这适用于类，但填充不会改变。我怎样才能做到这一点？风格在头上，我可以把它放在别的地方吗？

来源

2016-10-08 dmbdnr

是的。做电子邮件时应该没有什么头脑。把它全部内联。 –

您的电子邮件代码不适用于哪些电子邮件客户端？它在_any_客户端中工作吗？ –

尝试添加!important，即覆盖您inline-style

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

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

来源

2016-10-08 17:39:35 aldanux

nope，它不起作用：/ – dmbdnr

覆盖用！重要指示的继承。

https://www.w3.org/wiki/Inheritance_and_cascade

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

编辑：我看到我在画慢......好吧，你确定你关闭你的风格标签？（有时它是显而易见的东西......总是发生在我身上）。

来源

2016-10-08 17:44:20

@Micheal Allison是的，我确实关闭它。！重要的似乎不起作用 – dmbdnr

你是否在其他风格之后调用这种新风格？就像你的主要CSS文件一样？也许它被覆盖。 –

在我的html文件中，所有内容都是内联的，就像你在上面的例子中看到的那样。所以我想我是这样做的，通过把class =“smaller”放在最后 – dmbdnr

HTML电子邮件移动响应

回答

相关问题