Plugin Support
melinda a11n
(@melindahelt)
Automattic Happiness Engineer
Hi there!
Does it do that only with your custom theme? If you switch your theme to Storefront, temporarily, do the options line up as you’d expect them to? It could be a conflict with your theme.
You can also try to adjust the following CSS:
.woocommerce-checkout #payment .payment_method_stripe label[for=payment_method_stripe] {
padding-left: 32px;
}
making the left padding smaller (above) as well as adjusting part of the below CSS may do the trick
.woocommerce-checkout #payment ul.payment_methods li img.stripe-icon, #add_payment_method #payment ul.payment_methods li img.stripe-icon {
float: right;
max-width: 40px;
padding-left: 3px;
margin: 0;
}
I have not tried with a different theme.
When I changed the CSS as suggested, text and pictures move to the left in line with other options. The problem with the text in Explorer (only) is still there as in the picture that I linked to.
I tested to set a max-height which seem to work.
.woocommerce-checkout #payment ul.payment_methods li img.stripe-icon,
#add_payment_method #payment ul.payment_methods li img.stripe-icon {max-height: 30px;}
However I dont know yet if ruins the design in other browsers or mobile..
Plugin Support
melinda a11n
(@melindahelt)
Automattic Happiness Engineer
@kristoferlse – you may need to adjust media queries if it doesn’t display as you’d like on mobile and/or change your theme/work with the theme developer to fix issues.
