Shopify Question posted in
The Shopify help center can be found here.

Inline Payment Icons – Shopify

I’m using SVG payment icons in the footer of my website. However, I want to inline them. I tried playing with the CSS but still nothing is happening. Currently, the icons are displayed as a list. How can I inline them?

Here’s the Footer code:

<footer class="page-footer variant4 fullboxed">
    <div class="footer-bot">
        <div class="container">
          <div class="footer-nav">
            <ul>
                {% for link in linklists[settings.footer_nav]links %}
                    <li>{{ link.title | link_to: link.url }}</li>
                {% endfor %}
            </ul>
          </div>
      {% unless shop.enabled_payment_types == empty %}
      {% assign payment_icons_available = 'amazon_payments,american_express,apple_pay,bitcoin,cirrus,dankort,diners_club,discover,dogecoin,dwolla,forbrugsforeningen,interac,jcb,litecoin,maestro,master,paypal,visa' | split: ',' %}
        <div class="payment-icons">
          {% for type in shop.enabled_payment_types %}
            {% if payment_icons_available contains type %}
              {% assign icon_name = type | prepend: 'icon-' %}
                {% include icon_name %}
                {% endif %}
          {% endfor %}
        </div>
      </div>
    {% endunless %}
  </div>
</footer>

And here’s the CSS:

.payment-icons {

  width: 50px;
  margin: auto; !important;

}
Tags:

2

Answers


  1. 0

    You’re currently relying on the container of the SVG elements to control the width (50px) of each SVG, which makes it impossible for each SVG to flow next to each other. Adjust your CSS so that the container, div.payment-icons, can be 100% of the outer container and adjust each SVG element to specifically 50px width. From here, you can add additional CSS to space the SVG icons across the page:

    svg:not(:root) {
    overflow: hidden;
    display: inline-block;
    width: 50px;
}

.payment-icons {
    width: auto;
    margin: auto;
}

    In order to perfectly space out your SVG icons, adjust your footer HTML so that each SVG icon has a list-item container:

    <div class="payment-icons">
    <ul>
      {% for type in shop.enabled_payment_types %}
        {% if payment_icons_available contains type %}
        <li>
            {% assign icon_name = type | prepend: 'icon-' %}
                {% include icon_name %}
            {% endif %}
        </li>
      {% endfor %}
    </ul>
</div>

    Then include the following CSS:

    svg:not(:root) {
    overflow: hidden;
    display: inline-block;
    width: 50px;
    margin: 0 auto;
}

.payment-icons {
     // nothing should be needed here, unless you want negative margins to have the left-most and right-most icons to be against the "wall" of the container
}
.payment-icons ul {
    display: table;
    width: 100%;
    list-style-type: none;
    padding: 0;
    margin: 0 auto;
}
.payment-icons ul li {
    display: table-cell;
    vertical-align: middle;
}

    Update, mobile:

    @media (min-width: 300px) {
    svg:not(:root) {
        overflow: hidden;
        display: inline-block;
        width: 100%;
        margin: 0 auto;
    }

    .payment-icons {
        width: auto;
        margin: auto;
    }
    .payment-icons ul {
        display: table;
        width: 100%;
        list-style-type: none;
        padding: 0;
    }
    .payment-icons ul li {
        display: table-cell;
        vertical-align: middle;
        padding: 0 5px;
    }
}

// tablet+
@media (min-width: 767px) {
    svg:not(:root) {
        width: 50px;
    }

    .payment-icons ul {
        width: 25%;
    }
    .payment-icons ul li {
        padding: 0;
    }
}
    Login or Signup to reply.
  2. 0

    Try adding:

    .payment-icons 
   width: 100%;


.icon 
    display: inline;
    width: 10%;
    vertical-align: middle;

    I tested it on your website in the inspector and it worked.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search