Automatic Image Adaption Mobile/Desktop

Hey there,

i added the payment icons under the checkout button.

Did with this code:

<style>
  .methods-of-payment img { padding: 0.2em; }
  .lt-ie9 .methods-of-payment, .ie8 .methods-of-payment, .oldie .methods-of-payment { display: none; }
</style>
<span class="methods-of-payment">
  <img src="{{ 'paypal' | payment_type_img_url }}" height="19" alt=" paypal"/>
  <img src="{{ 'american_express' | payment_type_img_url }}" height="19" alt="american express"/>
  <img src="{{ 'maestro' | payment_type_img_url }}" height="19" alt="maestro"/>
  <img src="{{ 'master' | payment_type_img_url }}" height="19" alt="master"/>
  <img src="{{ 'amazon_payments' | payment_type_img_url }}" height="19" alt="amazon pay"/>
  <img src="{{ 'apple_pay' | payment_type_img_url }}" height="19" alt="apple pay"/>
  <img src="{{ 'visa' | payment_type_img_url }}" height="19" alt="visa"/>
  <img src="{{ 'google_pay' | payment_type_img_url }}" height="19" alt="google pay"/>
  <img src="{{ 'ideal' | payment_type_img_url }}" height="19" alt="ideal"/>
  <img src="{{ 'bancontact' | payment_type_img_url }}" height="19" alt="bancontact"/>
  <img src="{{ 'eps' | payment_type_img_url }}" height="19" alt="eps"/>
  <img src="{{ 'shopify_pay' | payment_type_img_url }}" height="19" alt="shopify pay"/>
</span>

 

On desktop, it looks very good. But on mobile it looks like this:

icon fail.PNG

 

How can i change the code, that the code adapt in one line and centered automatically?

 

I hope my english isn't too bad and you get my question

 

Best regards!

0 Likes