Fixed MM/YY and CVV for mobile view

This commit is contained in:
PCoder 2017-07-16 15:50:15 +05:30
parent ba72527f2f
commit acaa791a37
2 changed files with 23 additions and 4 deletions

View file

@ -524,7 +524,7 @@ a.unlink:hover {
} }
.brand { .brand {
float: left; float: left;
width: 8%; width: 10%;
} }
.brand #brand-icon { .brand #brand-icon {
vertical-align: bottom; vertical-align: bottom;
@ -592,6 +592,23 @@ a.unlink:hover {
margin-top: 30px; margin-top: 30px;
margin-bottom: 30px; margin-bottom: 30px;
} }
.credit-card-element-with-brand {
width: 100%;
float: left;
}
.brand {
width: 16%;
}
.card-expiry-element {
width: 40%;
}
.card-cvc-element {
width: 15%;
}
} }
@media (min-width: 1200px) { @media (min-width: 1200px) {

View file

@ -155,10 +155,12 @@
<form action="" id="payment-form-new" method="POST"> <form action="" id="payment-form-new" method="POST">
<input type="hidden" name="token" /> <input type="hidden" name="token" />
<div class="group"> <div class="group">
<div class="credit-card-element-with-brand">
<div class="brand"><i class="pf pf-credit-card" id="brand-icon"></i></div> <div class="brand"><i class="pf pf-credit-card" id="brand-icon"></i></div>
<div class="card-number-element"> <div class="card-number-element">
<div id="card-number-element" class="field"></div> <div id="card-number-element" class="field"></div>
</div> </div>
</div>
<div class="card-expiry-element"> <div class="card-expiry-element">
<div id="card-expiry-element" class="field"></div> <div id="card-expiry-element" class="field"></div>
</div> </div>