更改Charles Mudy的响应式HTML通讯模板的宽度

时间:2015-11-13 23:47:09

标签: html css responsive-design newsletter responsiveness

编辑:模板可在https://github.com/charlesmudy/responsive-html-email-template

找到

我喜欢模板,但是我在改变宽度和正确响应方面遇到了问题,我不知道为什么。在顶部的注释中,提到更改宽度,只需执行查找并替换以下大小:

    wrapper   : '500',
    columns   : '210',
    x-columns : [
                    left : '90',
                    right: '350'
            ]

然而,将包装器更改为750,将列更改为335(750的一半,然后减去80用于填充等,就像500/210),将x列分别更改为142和448,这些事情无法正常工作

当我缩小浏览器时,模板不会捕捉到一列直到480px,而右列从481-750px部分不在视野范围内。如果我恢复原始尺寸,它可以找到。我不确定我错过了什么。

1 个答案:

答案 0 :(得分:2)

您还需要修改@media规则。它位于模板中的line 103上。

您正在调整模板的widthmax-width,但不考虑元素的响应式设计。由于您基本上将所有元素更大,因此您需要使breakpoint更大。 You can read more about media queries here

Check out this fiddle