Question

我老实说不知所措。 Shopify对于尝试使用基本的html / css创建任何独特的东西来说太麻烦了。无论如何..这是我的问题：

https://luckyleo-dancewear-alt.myshopify.com/pages/customs-how-to

任何时候我创建一个自定义页面，我想设计自己的布局而不是使用shopify的RESTRICTIVE主题选项，这个35px填充在页面底部出现在全局包装器和页脚。这只发生在视差主题上，这是我的客户正在使用并希望我使用的主题。我处于一个奇怪的地方，我在html / css上足以设计网页布局，但不足以知道如何改变shopify主题源代码以满足我的需求。

我花了很多时间在检查模式下盯着chrome中的页面，在主题css样式表中筛选数小时等等。我无处可找到底部有填充或边距的地方页面/包装器或页脚上方。如果有人可以只看一看，也许一双新鲜的眼睛会看到我不知道的东西。但重要的是，我在CSS中所做的任何更改都不会全局应用于导致此35px问题的任何内容。使用视差主题基本页面布局/模板的页面没有此问题。我基本上只需要弄清楚自定义页面的作用，以及如何解决它。

在主题文件中创建页面模板时，这就是您所看到的

＆＃13;

<div class="container main content main-wrapper">
  <div class="sixteen columns page clearfix">
    <h1 class="center">
      {{ page.title }}
    </h1>
    <div class="feature_divider"></div>

    <div>
      {% include 'page-multi-column', content: page.content %}
    </div>
  </div>
</div>

＆＃13;

当您删除所拥有的内容并选择创建自己的div包装器布局时，会出现此问题。我认为它在某种程度上与为页面创建的自动html文档冲突。

我不想在我的页面布局中使用视差主题类的原因是试图弄清楚如何使用我自己的css / html和他们的组合来编写自定义布局只是一个令人头痛的问题。

我想做的就是创建一个2列垂直/水平居中的弹性网格，它使用％进行响应，并在调整窗口大小时转换为单个列，我可以这样做但是这个该死的白色空间在底部就在那里，我无法摆脱它。

Answer 1

时间到了，我花了10秒钟来确定保证金的来源。：）

您的页脚中添加了margin-top。

覆盖它，就像这样：

.footer { margin-top: 0; }

顺便说一下，如果在检查器中添加* { overflow: hidden; }，您将更容易看到间距来自哪个部分，因为当您检查父部分时，margin-top属性无法正确显示

Answer 2

页脚div（.footer）中有一个上边距

您可以通过将边距更改为

来删除边距

.footer { 
margin-top: 0; 
}

如果您只想从此页面删除页脚边距。尝试添加

.page-customshowto .footer { 
margin-top: 0; 
}

尝试使用自定义Css / html时Shopify + Parallax主题问题

2 个答案: