Shopify Mobilia 主题中的神秘 Margin/Padding

Question

我目前正在从 Shopify Mobilia 主题中删除一个产品页面模板，我无法删除页面两侧的 margin/padding。我搜索了 CSS 并使用了 Firebug 但没有成功。

页眉很好，但内容和页脚在 1080p 显示器上左侧大约 50 像素，右侧大约 80 像素。这对于白色背景的内容来说很好，但对于棕色背景的 div 来说有点难看。

相关页面： http://higher-tea.com/products/subscription

非常感谢收到任何建议。

谢谢。

Answer 1

我查看了您的代码，结果表明

div.container {
    margin: 0 auto;
    padding: 20px 0;
}

现在 margin:0 auto，以神秘的方式工作，它基本上水平对齐应用它的元素，在两侧留下相同的边距，我想原来的宽度是 1080px 但现在页面只有960px 宽度（参考下方）

@media only screen and (max-width: 1199px) and (min-width: 960px)
.container {
    position: relative;
    width: 960px;
    margin: 0 auto;
    padding: 0;
}

所以它给我们留下了 1080-960=120px，所以基本上左右 60px 60px 边距而且，.container 的子容器只有 940px 长并且没有居中对齐所以剩下的20 被添加到右侧 space 从而在两侧形成 60px 和 80px 的边距，希望这对您有所帮助（参考下面）

container .sixteen.columns {
    width: 940px;
}

Shopify Mobilia 主题中的神秘 Margin/Padding

Mystery Margin/Padding in Shopify Mobilia Theme

css

shopify