Shopify页脚网格-调整内容大小并对齐

时间:2018-07-17 16:13:10

标签: html css shopify footer

我正在使用布鲁克林主题在Shopify上工作。我的页脚调整需要帮助。我似乎无法使页脚的高度变短。那里有很多空白。在所附的照片中,您可以看到我有两个列。左边的一项包含两部分内容,而右边的一项具有一项内容。我该如何将所有这三个功能推到最前沿?我试图将padding和margins设置为0 ...但是它不起作用。我希望它离外部更近,而不是在两侧都留有大空间。

谢谢! Footer Image

    <footer class="site-footer small--text-left" role="contentinfo">

<div class="grid">

  {% comment %}
    Default to 1 footer column (copyright/powered_by/payment_types)
  {% endcomment %}
  {% comment %} Added by Ludo S on July 16 2018 {% endcomment %}
  {% if section.settings.footer_newsletter_enable %}
  {% assign num_footer_columns = 0 %}
  {% else %}
  {% assign num_footer_columns = 1 %}
  {% endif %}
  {% if section.settings.footer_newsletter_enable %}
  {% assign num_footer_columns = num_footer_columns | plus: 1 %}
  {% endif %}


  {% comment %}
    Create an extra menu column if link list has more than 5 links
  {% endcomment %}
  {% if linklists[section.settings.footer_link_list].links.size > 0 %}
    {% comment %}
      We have a Footer menu that isn't empty, we will need another column
    {% endcomment %}
    {% assign num_footer_columns = num_footer_columns | plus: 1 %}
    {% assign extra_footer_linklist_column = false %}
    {% assign footer_linklist_count = linklists[section.settings.footer_link_list].links.size %}
    {% if footer_linklist_count > 5 %}
      {% assign extra_footer_linklist_column = true %}
      {% comment %}
        We split the links so we'll need another column
      {% endcomment %}
      {% assign num_footer_columns = num_footer_columns | plus: 1 %}
    {% endif %}
    {% comment %}
      If we have an odd amount of links, we need to show 1 more link in 1st column
    {% endcomment %}
    {% assign extra_link = footer_linklist_count | modulo: 2 %}
    {% comment %}
      We start with a 2nd column after first column is filled up.
    {% endcomment %}
    {% assign footer_linklist_split = footer_linklist_count | divided_by: 2 | plus: extra_link | plus: 1 %}
  {% endif %}

  {% comment %}
    Determine whether there are social links
  {% endcomment %}
  {% assign footer_social_enable = false %}
  {% if
    settings.social_twitter_link != blank
    or settings.social_facebook_link != blank
    or settings.social_pinterest_link != blank
    or settings.social_google_plus_link != blank
    or settings.social_instagram_link != blank
    or settings.social_tumblr_link != blank
    or settings.social_youtube_link != blank
    or settings.social_vimeo_link != blank
    or settings.social_fancy_link != blank
    or settings.social_snapchat_link != blank
  %}
    {% assign footer_social_enable = true %}
  {% endif %}

  {% comment %}
    Calculate the number of footer columns shown. Default to 1.
  {% endcomment %}
  {% if footer_social_enable %}
    {% assign num_footer_columns = num_footer_columns | plus: 1 %}
  {% endif %}

  {% case num_footer_columns %}
    {% when 0 %}
    {% when 1 %}
      {% assign footer_column_width = '' %}
    {% when 2 %}
      {% assign footer_column_width = 'one-half small--one-whole' %}
    {% when 3 %}
      {% assign footer_column_width = 'one-third small--one-whole' %}
    {% when 4 %}
      {% assign footer_column_width = 'large--one-quarter medium--one-half' %}
  {% endcase %}

  {% if linklists[section.settings.footer_link_list].links.size > 0 %}


    <div class="grid grid__item {% if num_footer_columns == 1 %} one-half push--large--one-quarter push--medium--one-quarter small--one-whole{% else %} {{ footer_column_width }}{% endif %}">
      <ul class="no-bullets site-footer__linklist">
        {% for link in linklists[section.settings.footer_link_list].links %}

  {% comment %}
    Create a second column
  {% endcomment %}
  {% if extra_footer_linklist_column and forloop.index == footer_linklist_split %}
      </ul>
    </div>


    <div class="grid grid__item {% if num_footer_columns == 1 %} one-half push--large--one-quarter push--medium--one-quarter small--one-whole{% else %} {{ footer_column_width }}{% endif %}">
      <ul class="no-bullets site-footer__linklist">
  {% endif %}

          <li><a href="{{ link.url }}">{{ link.title }}</a></li>

        {% endfor %}
      </ul>
    </div>
  {% endif %}

  {% if footer_social_enable %}
  {% comment %} Added the if statement for the class and made the div a grid item by Ludo S on July 16 2018 {% endcomment %}
    <div class="grid grid__item {% if num_footer_columns == 1 %} one-half push--large--one-quarter push--medium--one-quarter small--one-whole{% else %} {{ footer_column_width }}{% endif %}">
        <ul class="no-bullets social-icons">
           {% if settings.social_instagram_link != blank %}
            <li>
              <a href="{{ settings.social_instagram_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Instagram' }}">
                <span class="icon icon-instagram" aria-hidden="true"></span>
                Instagram
              </a>
            </li>
          {% endif %}
          {% if settings.social_facebook_link != blank %}
            <li>
              <a href="{{ settings.social_facebook_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Facebook' }}">
                <span class="icon icon-facebook" aria-hidden="true"></span>
                Facebook
              </a>
            </li>
          {% endif %}
          {% if settings.social_twitter_link != blank %}
            <li>
              <a href="{{ settings.social_twitter_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Twitter' }}">
                <span class="icon icon-twitter" aria-hidden="true"></span>
                Twitter
              </a>
            </li>
          {% endif %}
          {% if settings.social_pinterest_link != blank %}
            <li>
              <a href="{{ settings.social_pinterest_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Pinterest' }}">
                <span class="icon icon-pinterest" aria-hidden="true"></span>
                Pinterest
              </a>
            </li>
          {% endif %}

          {% if settings.social_snapchat_link != blank %}
            <li>
              <a href="{{ settings.social_snapchat_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Snapchat' }}">
                <span class="icon icon-snapchat" aria-hidden="true"></span>
                Snapchat
              </a>
            </li>
          {% endif %}
          {% if settings.social_google_plus_link != blank %}
            <li>
              <a href="{{ settings.social_google_plus_link | escape }}" rel="publisher" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Google Plus' }}">
                <span class="icon icon-google_plus" aria-hidden="true"></span>
                Google Plus
              </a>
            </li>
          {% endif %}
          {% if settings.social_tumblr_link != blank %}
            <li>
              <a href="{{ settings.social_tumblr_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Tumblr' }}">
                <span class="icon icon-tumblr" aria-hidden="true"></span>
                Tumblr
              </a>
            </li>
          {% endif %}
          {% if settings.social_youtube_link != blank %}
            <li>
              <a href="{{ settings.social_youtube_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'YouTube' }}">
                <span class="icon icon-youtube" aria-hidden="true"></span>
                YouTube
              </a>
            </li>
          {% endif %}
          {% if settings.social_vimeo_link != blank %}
            <li>
              <a href="{{ settings.social_vimeo_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Vimeo' }}">
                <span class="icon icon-vimeo" aria-hidden="true"></span>
                Vimeo
              </a>
            </li>
          {% endif %}
          {% if settings.social_fancy_link != blank %}
            <li>
              <a href="{{ settings.social_fancy_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Fancy' }}">
                <span class="icon icon-fancy" aria-hidden="true"></span>
                Fancy
              </a>
            </li>
          {% endif %}
        </ul>
    </div>
  {% endif %}

  {% comment %} Added by Ludo S on July 16 2018 {% endcomment %}

  {% if section.settings.footer_newsletter_enable %}
 <div class="customNewsletter grid__item{% if num_footer_columns == 1 %} one-half push--large--one-quarter push--medium--one-quarter small--one-whole{% else %} {{ footer_column_width }}{% endif %}{% if num_footer_columns == 4 %} narrow-newsletter{% endif %}">
      {% form 'customer' %}
    {{ form.errors | default_errors }}
    {% if form.posted_successfully? %}
      <div class="newsletter--form">
        <div class="note form-success">{{ 'general.newsletter_form.newsletter_confirmation' | t }}</div>
      </div>
    {% else %}
      <label for="Email" class="newsletter__label hidden-label">{{ 'general.newsletter_form.newsletter_email' | t }}</label>
      <input type="hidden" name="contact[tags]" value="newsletter">
      <div class="newsletter--form">
        <p class="h2" style="color:{{ section.settings.newsletter_text_color }}">Stay in touch!</p><br>
         <p class="h6" style="color:{{ section.settings.newsletter_text_color }}">Get updates on our newest styles.</p>
        <div class="input-group">
          <input type="email" value="{% if customer %}{{ customer.email }}{% endif %}" placeholder="{{ 'general.newsletter_form.newsletter_email' | t }}" name="contact[email]" id="Email" class="input-group-field newsletter__input" autocorrect="off" autocapitalize="off">
          <span class="input-group-btn">
            <button type="submit" class="btn newsletter__submit" name="commit" id="Subscribe">
              <span class="newsletter__submit-text--large">{{ 'general.newsletter_form.submit' | t }}</span>
              <span class="newsletter__submit-text--small">
                <span class="icon icon-arrow-right" aria-hidden="true"></span>
              </span>
            </button>
          </span>
        </div>
      </div>
    {% endif %}
  {% endform %}
    </div>

{%endif%}

 <div class="grid grid__item one-half push--large--one-quarter push--medium--one-quarter small--one-whole">
    <p style="color:white">&copy; {{ 'now' | date: '%Y' }}, {{ shop.name | link_to: '/' }}<br>Powered by Caffeine + Doggie Kisses</p></p>
      {%- if section.settings.show_payment_icons -%}
        {%- unless shop.enabled_payment_types == empty -%}
          <span class="visually-hidden">{{ 'general.payment.method' | t }}</span>
          <ul class="inline-list payment-icons">
            {%- for type in shop.enabled_payment_types -%}
              <li>
                {{ type | payment_type_svg_tag: class: 'icon' }}
              </li>
            {%- endfor -%}
          </ul>
        {%- endunless -%}
      {%- endif -%}
  </div>
</div>

0 个答案:

没有答案