As a temporary solution: it should be possible to use javascript and detect the orientation of the device and alert the user to turn the device in landscape mode.
@antpayne
Please post the url of your site.
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.
Hi Lorro, thanks for your reply, much appreciated. We did think most customers would realise they have to rotate their device. I think most do, although we have had a couple of customers calling support with this problem. Thanks again.
