Shopify + Parallax theme Issues when trying to use custom Css/html

Question

I am honestly at a loss. Shopify is SUCH a nuisance when it comes to trying to create anything unique using basic html/css. Anyways.. here is my problem:

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

Anytime I create a custom page where I want to design my own layout not using shopify's RESTRICTIVE theme options, there's this 35px padding that appears at the bottom of the page between the global wrapper and the footer. This only happens with the parallax theme, which is the theme my client is using and wants me to use. I am at a weird point where I am decent at html/css enough to design web layouts, but not good enough to know how to alter a shopify themes source code to fit my needs.

I've spent tons of time just staring at the page in chrome in inspect mode, hours sifting through the themes css stylesheet, etc. there is nowhere that I can find where there is padding or a margin at the bottom of the page/wrapper or above the footer. If anyone can just take a look, maybe a fresh set of eyes will see something I don't. The important thing however, is that any changes I make in the CSS will NOT apply globally to whatever is causing this 35px issue. Pages that use the parallax themes basic page layouts/templates do not have this issue. I basically just need to figure out why the custom pages do, and how to fix it.

When you create a page template in the theme files, this is what you see

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

The issue arises when you delete what they have and opt to create your own div wrapper layout. I think it somehow conflicts with the auto html document that is created for the page.

The reason I don't want to use parallax themes classes for my page layout is that trying to figure out how to write custom layouts using a combination of my own css/html and theirs is just a headache.

All I want to do is create a 2 column vertically/horizontally centered flex grid that's responsive using % and that converts into a single column when the window is resized, which I can do, but this damn white space at the bottom is there and I can't get rid of it.

drip drip · Accepted Answer · 2017-08-15T05:25:58

Timed that, took me 10 seconds to figure out where the margin was coming from. :)

There is margin-top added to your footer.

Overwrite it, like so:

.footer { margin-top: 0; }

By the way if you add * { overflow: hidden; } in the inspector it will be easier for you to see from what section the spacing is coming from, since the margin-top property doesn't show properly when you inspect parent sections.

Shopify + Parallax theme Issues when trying to use custom Css/html

2 Answers