Trying to place long sentence in footer for Supply Theme

Excursionist
56 0 14

Hi All

I am trying to put this text 'Copyrights and trademarks of products appearing on our website are property of their respective owners.' under the footer but it shows like this...

I prefer it to be a single line.

I tried doing this... it does not really work..

It seems there is a 'table' using two different cells.

Any help on this will be great!

Thanks

Jon

0 Likes
Tourist
29 0 2

In the footer snippet code, you need to adjust the grid sizes in this portion to suit your desired size.

    <div class="grid">
      <div class="grid-item{% unless shop.enabled_payment_types == empty %} large--two-fifths{% endunless %}">
        {% if settings.footer_legallinks_enable %}
          <ul class="legal-links inline-list">
            {% for link in linklists[settings.footer_legallinks_linklist].links %}
              <li><a href="{{ link.url }}">{{ link.title }}</a></li>
            {% endfor %}
          </ul>
        {% endif %}
        <ul class="legal-links inline-list">
          <li>
            &copy; {{ 'now' | date: "%Y" }} {{ shop.name }}
          </li>
        </ul>
      </div>

      {% unless shop.enabled_payment_types == empty %}
        <div class="grid-item large--three-fifths large--text-right">
          <ul class="inline-list payment-icons">
            {% for type in shop.enabled_payment_types %}
              <li>
                <span class="icon-fallback-text">
                  <span class="icon icon-{{ type }}" aria-hidden="true"></span>
                  <span class="fallback-text">{{ type | replace: '_',' ' }}</span>
                </span>
              </li>
            {% endfor %}
          </ul>
        </div>
      {% endunless %}

    </div>

 

0 Likes
Astronaut
1890 1 387

You might want to put the copyright text in another row/grid-item.

      <div class="grid">
        <div class="grid-item{% unless shop.enabled_payment_types == empty %} large--two-fifths{% endunless %}">
          {% if settings.footer_legallinks_enable %}
            <ul class="legal-links inline-list">
              {% for link in linklists[settings.footer_legallinks_linklist].links %}
                <li><a href="{{ link.url }}">{{ link.title }}</a></li>
              {% endfor %}
            </ul>
          {% endif %}
        </div>

        {% unless shop.enabled_payment_types == empty %}
          <div class="grid-item large--three-fifths large--text-right">
            <ul class="inline-list payment-icons">
              {% for type in shop.enabled_payment_types %}
                <li>
                  <span class="icon-fallback-text">
                    <span class="icon icon-{{ type }}" aria-hidden="true"></span>
                    <span class="fallback-text">{{ type | replace: '_',' ' }}</span>
                  </span>
                </li>
              {% endfor %}
            </ul>
          </div>
        {% endunless %}
        <div>

        <div class="grid-item">
          <ul class="legal-links inline-list">
            <li>
              &copy; {{ 'now' | date: "%Y" }} {{ shop.name }}
            </li>
            <li>
              {{ powered_by_link }}
            </li>
          </ul>
        </div>

      </div>

    </div>

 

0 Likes
Excursionist
56 0 14

Hi Bathroomware

Thanks for the information.

It seems that the following line of code changes the position and this is the best I can do by changing 'two-fifths' to 'three-fifths'.

div class="grid-item{% unless shop.enabled_payment_types == empty %} large--three-fifths{% endunless %}">

Which it will look like this.

So I was wondering if the sentence is too long that causes the 'payment' icons to shift down.

Anyway, thanks for the help and it will be great if you can answer my question.

Thanks.

Jon

0 Likes
Excursionist
56 0 14

Hi Alex

Thank you for the help.

It works but an extra row is needed to make the sentence look normal.

Regards

Jon

0 Likes
Highlighted
Shopify Partner
115 0 7

I just wanted to make a comment about this. You need to consider that your site will be viewed on all types of different devices. Even if you get it to fit on one line on your device that doesn't mean it will fit on one line for other devices. Some devices will just be too small for this sentence to fit on one line. You may be better off making it look good on multiple lines rather than trying to make it all fit on one line.

0 Likes
Excursionist
56 0 14

Hi Halley 

Thanks for the comment on viewing the sentence through different devices and I will keep that in mind.

Regards

Jonathan Kho

0 Likes