CC form layout

Can you provide a screenshot of what you’re seeing? Have you tried in different themes to see if the issue remains?

Have not tried a different theme. We’re using enfold and don’t want to depart from it for the sake of a couple form fields.

checkout screen shot

This behavior is consistent in Chrome, Edge, and IE.

@rayhunt0917

Thanks for sharing the screen, we have not received any reports of this But seems like something funky is going on. I have added this to our git repo for review. I will update you here once this issue will be resolved.
Thanks for bringing this to our attention.

FWIW I don’t think this was an issue on the previous version of your plugin, but I can’t be 100% certain.

Any update on this? Or can you at least tell me where I could look to edit the layout on the checkout page? TIA

Did some inline editing of the page using google chrome and discovered these modifications make the layout much more appealing:

1. insert a line break <br /> after label for expiration date. This shifts the selects down to the next line for a prettier display

2. set margin to 5px for paypal_pro_payflow-card-cvc input to align input box with month and year selects.

Screenshot of modified checkout

Hi, Sorry for delay in response, we have made some adjustments to it , so please download the CC Layout Fix Apply it by simply extract the files and upload via FTP then check. It would great if you can give it a shot and provide your feedback.
Thanks!

Excellent work! Looks fantastic on a desktop/tablet! Any ideas on how to clean up this? This is the layout on a Samsung Galaxy S6 Edge

Mobile Screenshot

@rayhunt0917, That is really odd, I have put this review to our developer, we will look into this and make necessary adjustment, I will update you here soon.
Thanks

The misalignment issue of the CC expiry date has reared it’s ugly head once again! Could you please provide a fix as you did the last time? TIA!

Did something change in your theme? Did you just recently update our plugin to 1.4.7, or when did this start happening again?

Updated theme mid-November but didn’t notice any odd behaviors then. This has been a recent development within the past week or two. I can’t pinpoint the exact or date this occurred though. Screenshot is linked below. Similar to the initial issue, but this time only affecting the expiry fields.

https://www.dropbox.com/s/1ndpauddndqgnte/Screenshot%202018-01-07%2009.15.53.png?dl=0

If it is of any help, I noticed the fields layout fine on small and x-small viewports. The behavior is noticeable when screen width is > 768px.

Okay, We are going to take a second look and see if there is any adjustments we need to make. In the mean time, can you tell me if you installed any new plugins during this time priod , did you tried to disable those and see if you get this working?if not, can you please try that and see what you got?

Hello Oliver,

Just wanted to follow up and let you know I discovered the issue was in theme’s woo commerce style sheet. In the Enfold theme, woocommerce-mod.css ln 147 is:

#top #payment label{display:inline;}

This would cause the Month and Year select to awkwardly scramble about in <p.form-row.form-row-first>. I resolved by copying the line above to my child stylesheet and changed display to block. Thanks for your time and attention!