CSS fix for mobile (Credit Card Processing)

I managed to apply the below CSS which worked well…

@media screen and (max-width: 767px) {
span#ppcp-credit-card-gateway-card-expiry
{
    width: 60% !important;
}
}

Wondering if there is a better option to make it more responsive on mobile.

Thanks

Hello @ahmedzeidan

thank you for reaching out and informing us about this issue. However, I have the feeling this (like how you see it) is caused by your theme or another plugin. I reviewed the same on my system and was not able to reproduce it, but saw the usual:
https://snipboard.io/MOlVnt.jpg

Do you have more details on this, so we can see if we can reproduce and make a case for this adjustment?

Kind regards,
Joost

Thanks for your reply @joostvandevijver .

Seems like your screenshot is for desktop. The issue is on mobile only for me.

have you tried Astra theme to re-produce this CSS issue?

Hello @ahmedzeidan

I cannot see the screenshot you sent before, but I have tested the described checkout frame with both the StoreFront and Astra theme on a phone (with Chrome). Here you can see the outcomes: https://snipboard.io/rjHJws.jpg

Please let me know what the issue is you are seeing because for me both options seem to be acceptable layouts.

Kind regards,
Joost

Hi @joostvandevijver

seems like the previous screenshot has been removed by the host, adding a new screenshot showing the CSS issue with the expired card field:

https://snipboard.io/2ZbtAB.jpg

Hello @ahmedzeidan

Yes, now I can see the screenshot and that does indeed look out of place. You would need to try disabling options/plugins/filters on your site in order to find out what is causing this issue because as you can see: by default, this does not happen.

Not sure what I can do to help you with this.

Kind regards,
Joost

Since we haven’t heard back from you, I’m going to mark it as resolved.
In case you’re still having problems, feel free to let us know!