Ad

Inline Payment Icons

- 1 answer

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;

}
Ad

Answer

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;
    }
}
Ad
source: stackoverflow.com
Ad