Stripe card images HUGE

[DueNorthCreatives]

Hello,

I am working on a client site with WooCommerce and the Stripe plugin. When on the checkout, the card images are HUGE and the card no., expiry etc. fields are missing. I can change the img width in the inspector but when I try to implement custom CSS in the Theme Options I can’t get anything to work – found another post about this but that fix didn’t work either.

[ruenel]

Hello Ross,

Thanks for writing in!

To reduce the width of the card images, you need to add CSS code into Pro > Theme Options > CSS.

.woocommerce-account form .payment_methods label img, 
.woocommerce-checkout form .payment_methods label img {
    min-width: 0;
    max-width: 45px;
    margin-right: 5px;
}

Feel free to make adjustments as you need. Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

Intro to CSS - https://goo.gl/mFuWQT
How to get CSS selectors - https://goo.gl/BmoH39
Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa
CSS Media Queries - https://goo.gl/L3ZHNg

[DueNorthCreatives]

Hi Ruenel,

I’m sorry I have tried this but it’s not worked – I am sure this was in my first attempts too.

Am I doing something wrong?

[ruenel]

Hello Ross,

You have inserted a broken CSS code. You have added this;

/* // Table Styles CSS */
 .rg-container {
     font-family: "Ubuntu", Helvetica, Arial, sans-serif;
     font-size: 1.1em;
     font-weight: 300;
     line-height: 1;
     margin: 0;
     padding: 1em 0;
     color: #1a1a1a;
}
 .rg-header {
     margin-bottom: 1em;
}
 .rg-hed {
     font-family: "Ubuntu", Helvetica, Arial, sans-serif;
     font-weight: bold;
     font-size: 1.35em;
     margin-bottom: 0.25em;
}
 .rg-subhed {
     font-size: 1em;
     line-height: 1.4em;
}
 .rg-source-and-credit {
     font-family: "Ubuntu", Times,serif;
     width: 100%;
     overflow: hidden;
     margin-top: 1em;
}
 .rg-source {
     margin: 0;
     float: left;
     font-weight: bold;
     font-size: 0.75em;
     line-height: 1.5em;
}
 .rg-source .pre-colon {
     text-transform: uppercase;
}
/*styles for graphic*/
 table.rg-table {
     margin: 0 0 1em 0;
     width: 100%;
     font-family: "Ubuntu", Helvetica, Arial, sans-serif;
     font-size: 1em;
     border-collapse: collapse;
     border-spacing: 0;
}
 table.rg-table * {
     -moz-box-sizing: border-box;
     box-sizing: border-box;
     margin: 0;
     padding: 0;
     border: 0;
     font-size: 100%;
     font: inherit;
     vertical-align: baseline;
     text-align: left;
     color: rgb(1, 90, 69);
}
 table.rg-table thead {
     border-bottom: 0px solid rgba(195,195,197,.3);
}
 table.rg-table th {
     font-weight: bold;
     padding: 0.5em;
     font-size: 0.85em;
     line-height: 1.4;
}
 table.rg-table td {
     padding: 0.5em;
     font-size: 0.9em;
     line-height: 1.4;
}
 table.rg-table .highlight td {
     font-weight: bold;
}
 table.rg-table tr {
     border-bottom: 0px solid rgba(195,195,197,.3);
     color: #222;
}
 table.rg-table .number {
     text-align: right;
}
 table.rg-table.zebra tr:nth-child(even) {
     background: rgba(195, 195, 197, 0.1);
}
 table.rg-table tr.highlight {
     background: #edece4;
}
 @media screen and (max-width: 500px) {
     .rg-container {
         max-width: 500px;
         margin: 0 auto;
    }
     table.rg-table {
         display: block;
         width: 100%;
    }
     table.rg-table tr.hide-mobile, table.rg-table th.hide-mobile, table.rg-table td.hide-mobile {
         display: none;
    }
     table.rg-table thead {
         display: none;
    }
     table.rg-table tbody {
         display: block;
         width: 100%;
    }
     table.rg-table td:last-child {
         padding-right: 5px;
         padding-left: 5px;
         margin-left: -5px;
         margin-right: -5px;
    }
     table.rg-table tr, table.rg-table th, table.rg-table td {
         display: block;
         padding: 0;
    }
     table.rg-table td[data-title]:before {
         content: attr(data-title) ":A0";
         font-weight: bold;
         display: inline-block;
         content: attr(data-title);
         float: left;
         margin-right: 0.5em;
         font-size: 0.95em;
    }
     table.rg-table tr {
         border-bottom: none;
         margin: 0 0 0.5em 0;
         padding: 0.5em 0;
    }
     table.rg-table tr:nth-child(even) {
         background: none;
    }
     table.rg-table td {
         padding: 0.5em 0 0.25em 0;
         border-bottom: 0px dotted #ccc;
         text-align: right;
    }
     table.rg-table td:empty {
         display: none;
    }
     table.rg-table .highlight td {
         background: none;
    }
     table.rg-table tr.highlight {
         background: none;
    }
     table.rg-table.zebra tr:nth-child(even) {
         background: none;
    }
     table.rg-table.zebra td:nth-child(even) {
         background: rgba(195, 195, 197, 0.1);
    }
    /* // End of Table CSS */

It is missing a closing Right Curly Brace. I went ahead and corrected it already.

Kindly check the checkout page now.

[DueNorthCreatives]

Ah, thank you so much for this – it’s very much appreciated!

[prakash_s]

Hello Ross,

Glad that @ruenel were able to help you. Please feel free to reach if you have any query regarding our theme and theme settings.

Thanks