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.
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
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?
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.
Ah, thank you so much for this – it’s very much appreciated!
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