Authorize.net payment processing fields overlap each other

We are using the credit card acceptance form and as you can see in the image the expiration date and number/cvv2 fields are loading on top of eachother with the text (slash and colon) seperating the lines.  We tried manuvering the fields but this resulted in the page loading but as soon as you click any of the fields in question it cuts off half the field.

Is there any way to get this to layout so the fields appear next to eachother or at least to remove the slash and colon so this stacks more nicely?

Thanks in advance for your help.

To fix this you can add the following CSS to your form:

table.form-address-table tr:nth-child(3) .form-sub-label-container:first-child, table.form-address-table tr:nth-child(4) .form-sub-label-container:first-child {
    width: 51.5%;
}
table.form-address-table tr:nth-child(3) .form-sub-label-container:last-child, table.form-address-table tr:nth-child(4) .form-sub-label-container:last-child {
    width: 40%;
}
#input_29_cc_number, #input_29_cc_exp_month {
    margin-right: 2%;
    width: 93%;
}

It will set your Authorize.net payment tool into the following order:

You can add it to your form by following these steps: Inject Custom CSS Codes

Do let us know however if you happen to have any additional issues and we would be happy to assist with the same.

That worked to fix the 1st problem but now I can't edit the products how do I fix this

I presume you would like to edit the product list in your payment integration? That should be possible by selecting the payment field and click the wizard icon:

Then click "Continue" and the "Next" button to see the product lists. Here you can select and edit the product.

Let us know if you are still having problems on this.

Since this issue is not the same as your original issue, I have moved this to a new thread here: https://www.jotform.com/answers/822087

We will help you resolve the same on that new thread and will reply back shortly.

Ok, This is part of the old issue, when the mobile widget is used the original overlapping takes place again. How can I fix I for mobile devices

Thanks!

I'm sorry, I'm having a hard time understanding your concerns. When and where does the overlapping happens? Does it happen when you view the form using the direct link on a mobile device? And if the mobile responsive widget is added? The problem shown in your screenshot is more related to the payment wizard not showing the products, it was answered by my colleague on this thread: https://www.jotform.com/answers/822087. It would be best to focus on that thread for this issue.

Here are the problems you have mentioned:

1. Credit card fields are not aligning properly => This was resolved by my colleague using a custom CSS code.

2. You mentioned you are unable to edit the products => I then posted the steps on how to edit the products in your payment integration.

3. The next reply you sent, you shared a screenshot of the payment integration not showing the product list => My colleague opened a separate thread for it so that we can better discuss it and avoid confusion.

4. Then the most recent reply you have in this thread is about the overlapping of fields in mobile display?

It would be best to focus on one question per thread for us to help you further and avoid confusion. Now we'll answer your inquiry regarding the overlapping of fields in this thread, please do provide us more information on what you meant, what specific fields are having problems? A screenshot of it would greatly help us.

I checked this form https://form.jotform.com/61014856408151, this is how it looks like in iPhone:

We'll wait for your response.