Responsive Issue

[dharmeshajani]

Thanks for good great awesome plugins. I have issue with responsive design. I hope you are check this issue.

Thanks Again & Again.

[MatayoshiMariano]

Someone have made it responsive?

[adamwong246]

bump. I really liked skeuocard but it's sadly mobile unfriendly

[ssimmons42]

Here is some CSS I came up with to make it responsive. It isn't perfect but it works pretty good.
At 390px it drops the brand logo. It was done this way to prevent it from getting over-crowded at smaller screens.

/* Make Skeuocard responsive */
@media only screen and (max-width: 500px) {
.checkout_page .skeuocard {
padding: 20px 20px !important;
}
}

@media only screen and (max-width: 430px) {
.checkout_page .skeuocard {
padding: 20px 10px !important;
}
}

@media only screen and (max-width: 410px) {
.checkout_page .skeuocard {
padding: 20px 5px !important;
}
}

@media only screen and (max-width: 400px) {
.skeuocard.js .face{
width: 99% !important;
}

.skeuocard.js .flip-tab {
    width: 150px !important;
    font-size: 10px !important;
}

.skeuocard.js .flip-tab p {
    width: 90px !important;
}

}

@media only screen and (max-width: 390px) {

.skeuocard .face.front {
    background-image: url('/static/skeuocard-master/images/products/generic-front.png'),
    url('/static/skeuocard-master/images/card-front-background.png')!important;
}

.skeuocard.js .cc-number input{
   font-size: 15px!important;

}

/* correction for amex cards */
.skeuocard .face.front .cc-cvc {

    margin-left: -10% !important;
}

.skeuocard.js .front .flip-tab {
    width: 140px !important;
    font-weight: bold;
    font-size: .7em !important;

}

.skeuocard.js .front .flip-tab p {
    width: 95px !important;
}

}

@media only screen and (max-width: 360px) {

/* correction for amex cards */
.skeuocard .face.front .cc-cvc {
    margin-left: -20% !important;
}

}

@media only screen and (max-width: 340px) {

/* correction for amex cards */
.skeuocard .face.front .cc-cvc {
    margin-left: -30% !important;
}

.skeuocard.js .cc-number input{
   font-size: 14px!important;

}

}

@media only screen and (max-width: 310px) {

.skeuocard.js .cc-number input{
   font-size: 13px!important;

}

}

@media only screen and (max-width: 300px) {

.skeuocard.js .face {

    height: 190px !important;
}

.skeuocard.js .back .cc-cvc  {

    margin-left: -10px !important;

}
.skeuocard.js .face input {
    font-size: .9em !important;

}

.skeuocard.js .cc-field .cc-name {
    font-size: .8em !important;
    top: 75% !important;

}

.skeuocard.js .cc-field .cc-exp input {
    font-size: .8em !important;

}

/* amex specific correction */
.skeuocard.product-amex .cc-field .cc-name {

    top: 80% !important;
}

}

@media only screen and (max-width: 260px) {

.skeuocard.js .face input{
   font-size: .8em !important;
}

}

[ssimmons42]

Here is a screenshot of it at 320px:

[ssimmons42]

Cards with logos can be done be creating a card front for each card without the logo (using photo editing software) saving it as a different name (ex visa-front-small.png), and saving the logo as another file (ex visa-logo.png) Then using css similiar to below:

@media only screen and (max-width: 390px) {

.skeuocard.product-visa .face.front {

    background-image: url('/static/skeuocard-master/images/products/visa-front-small.png'),
    url('/static/skeuocard-master/images/card-front-background.png')!important;
}

.skeuocard.product-visa .face.front:after {

    content: url('/static/skeuocard-master/images/products/visa-logo.png');
    position: absolute;
    top: 85%;
    left: 80%;
     width: 2% !important;
}

}

[ssimmons42]

Then, it will look like this screen shot (320px):