Tagged: 

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • October 25, 2019 at 4:13 pm #1151241
    BrendaSarg

    Hi there!

    The input field for the credit card number, expiry date and the security code on my checkout page is too large on mobile. Customers are struggling to enter their information?

    I’m having a hard time targeting that field for mobile, can you help me make it user friendly on mobile?

    October 25, 2019 at 5:23 pm #1151270
    Victoria

    Hey BrendaSarg,

    Best regards,
    Victoria

    October 29, 2019 at 10:05 pm #1152156
    BrendaSarg

    That didn’t really help me at all? Can you help with HOW I can edit the external iframe? Or override the css for those fields or anything?

    October 30, 2019 at 4:06 am #1152219
    BrendaSarg

    I did some more research. It is definitely theme related. I also confirmed that with Square and WooCommerce

    When I put storefront theme (or any other one!) , it’s not an issue?
    I also deactivated all plugins and tested one by one. Not a conflict there.

    This is a critical issue for me as it’s a holiday season and people are not completing the sale on mobile.They are leaving because they can’t see all their credit card entered.

    October 30, 2019 at 4:52 pm #1152412
    Victoria

    Hi BrendaSarg,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (max-width: 767px) {
  .wc-square-credit-card-new-payment-method-form.js-wc-square-credit-card-new-payment-method-form {
        width: 80vw;
  }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    April 1, 2020 at 9:54 pm #1199891
    tiffanytnttobol

    I implemented this code and it made the credit card field long enough to enter the full number but it is right aligned and hanging out of the box.

    eddiescleanhands.com/checkout

    April 3, 2020 at 5:03 am #1200357
    Rikard

    Hi tiffanytnttobol,

    I can’t see that happening on my end using Chrome. How can we reproduce the problem you are seeing on your end?

    Best regards,
    Rikard

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.