【问题标题】:Mystery Margin/Padding in Shopify Mobilia ThemeShopify Mobilia 主题中的神秘边距/填充
【发布时间】:2016-10-08 07:45:07
【问题描述】:

我目前正在从 Shopify Mobilia 主题中删除产品页面模板,我无法摆脱页面两侧的边距/填充。我已经搜索了 CSS 并使用了 Firebug,但没有成功。

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

有问题的页面: http://higher-tea.com/products/subscription

任何建议都非常感谢。

谢谢。

【问题讨论】:

    标签: css shopify


    【解决方案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 个被添加到右侧空间,从而在两侧留出 60px 和 80px 的边距,希望对您有所帮助(参考下文)

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

    【讨论】:

    • 感谢您的详细回复。我很好奇为什么主页不受相同边距的影响?类似的棕色背景部分也使用十六级或八级,但背景是屏幕的全宽?我编辑的模板中缺少什么?同样,主页页脚不受这些边距的影响。感谢您的宝贵时间。
    • 也许主页有不同的宽度规则,看看它,你会发现一些东西,我已经尽力了:)
    • 我检查过,他们正在使用 100% 宽度(例如:.flex-active-slide),就像我说的,在主页上,所以很合适,如果我的回答对你有帮助,请标记它正确
    猜你喜欢
    • 2015-11-03
    • 1970-01-01
    • 2013-01-11
    • 1970-01-01
    • 1970-01-01
    • 2012-10-08
    • 2016-08-19
    • 1970-01-01
    • 2012-07-27
    相关资源
    最近更新 更多