My credit card icons are contained within a ul. I have used the properties background-image and display:inline for the LIs, which display nicely on larger screens.
Unfortunately, when viewed on mobile devices, the icons are cut off. My question is whether it's possible to make the icons appear on two lines on mobile or to scale down their size. I attempted using transform:scale with a max-width:474px, and while it does work, all the icons get shifted to the right. Even after trying float:left and text-align:left, there was no change in the layout.
Below is the code snippet:
.payment-methods {
float: left;
white-space: nowrap;
list-style-position: outside;
list-style-type: disc;
vertical-align: baseline;
}
.payment-methods li {
background-repeat: no-repeat;
background-size: auto auto;
display: inline;
padding: 10px 40px;
}
.payment-methods .visa {
background-image: url("https://via.placeholder.com/40x20");
}
.payment-methods .mastercard-card {
background-image: url("https://via.placeholder.com/40x20")
}
.payment-methods .american-express-card {
background-image: url("https://via.placeholder.com/40x20")
}
.payment-methods .discover-card {
background-image: url("https://via.placeholder.com/40x20")
}
.payment-methods .paypal-card {
background-image: url("https://via.placeholder.com/40x20")
}<ul class="payment-methods">
<li class="visa"></li>
<li class="mastercard-card"></li>
<li class="american-express-card"></li>
<li class="discover-card"></li>
<li class="paypal-card"></li>
</ul>