The credit card details box is an iframe showing a small document hosted by PayPal, not part of WooCommerce. I’m pretty sure its not possible to control the styles inside the iframe by css. Some developers have reported success by way of using jquery to alter styles inside iframes dynamically, but that sounds like hard work for what it is, and whether this will work for all browsers is not certain. One would expect PayPal to have put measures in place to prevent websites tampering with its page.
What you could do is widen the iframe as much as possible by reducing the margins which take a lot of space on a small screen. Try this custom css:
@media only screen and (max-width:450px) {
.woocommerce-checkout .woocommerce {width:420px; margin-left:-35px}
}
@media only screen and (max-width:350px) {
.woocommerce-checkout .woocommerce {width:370px; margin-left:-35px}
}
You lose some of the formatting higher up the page on mobile and that’s the downside.
One would hope eventually PayPal will style their page in a more mobile-friendly way.
I think most users will be canny enough to rotate their phones.
