Accept Hosted Description and Invoice Number too narrow on mobile

[eventespresso]

When using Authorize.Net Accept Hosted in an iFrame, the "Description" and "Invoice Number" areas are too narrow to read easily.

For example, see this screenshot: https://monosnap.com/file/HFdx6i4XhyZhoflYF9iE5i6rOkUZPD#

We are working around this by forcing the iFrame's container to have a minimum width of 400px, which is sufficiently wide for the Description and Invoice number to look better, but it's not the ideal solution because then mobile users need to scroll left and right to read everything.

Ideally, if the iFrame's area is more narrow than 300 px or something, the contents of description should fall BELOW the title "Description", and likewise the invoice number would fall under the title "Invoice Number".

Eg, instead of

============================

Description {contents-of-description}

Invoice Number {invoice-number}

 ============================

on narrow screens, it should become

============================

Description

{contents-of-description}

Invoice Number

{invoice-number}

============================

This would make better use of the limited horizontal space.

And yes I realize you can customize the form however you like if you use Accept.js, but I think this is a pretty general issue (experienced by anyone who actually tests their payment form on a mobile device) so it would make sense to fix it on the hosted solution. Besides, the fix should only require a few CSS tweaks.

[Travis8426]

Thanks for sharing it. As we were looking for the same code. so that we could use for the page of carolinas homebuyers. And great when I applied so it worked for us. You have explained it in a very detailed it. And at the end shared the solution for fixing such issue. Really appreciate you way of explanation.