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

【问题标题】：Shopify + Parallax theme Issues when trying to use custom Css/html尝试使用自定义 Css/html 时的 Shopify + Parallax 主题问题
【发布时间】：2017-08-15 04:37:14
【问题描述】：

老实说，我很茫然。在尝试使用基本的 html/css 创建任何独特的东西时，Shopify 实在是太麻烦了。无论如何..这是我的问题：

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

每当我创建一个自定义页面时，我想在不使用 shopify 的 RESTRICTIVE 主题选项的情况下设计自己的布局时，就会在页面底部的全局包装器和页脚之间出现这个 35 像素的填充。这只发生在视差主题上，这是我的客户正在使用并希望我使用的主题。我处于一个奇怪的点，我在 html/css 方面足够优秀，可以设计网页布局，但还不足以知道如何更改 shopify 主题源代码以满足我的需求。

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

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

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

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

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

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

【问题讨论】：

标签： html css shopify

【解决方案1】：

计时，我花了 10 秒钟才弄清楚边距来自哪里。 :)

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

覆盖它，像这样：

.footer { margin-top: 0; }

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

【讨论】：

我一定是盯着它太久了，谢谢！

【解决方案2】：

页脚 div ( .footer ) 中有一个顶部边距

您可以通过将其更改为来删除边距

.footer { 
margin-top: 0; 
}

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

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

【讨论】：