Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • April 28, 2020 at 5:22 pm #1207864
    jonroot

    Hi guys
    I have a strange bug on 2 of my Enfold sites. The credit card field (using Square) only lets you enter 6 numbers when using a mobile phone. This is occurring on two of my sites, both running Enfold with WooCommerce. I’ve attached a screen shot for reference: https://imgur.com/a/cnM4HCc
    Is there a quick CSS I can enter to remedy this?
    Thank you!
    Jon

    April 28, 2020 at 5:23 pm #1207866
    jonroot
    This reply has been marked as private.
    May 1, 2020 at 3:20 am #1208701
    jonroot

    Hi guys – just following up on this – any idea what could be a solution?
    Thanks,
    Jon

    May 1, 2020 at 4:49 am #1208711
    Rikard

    Hi Jon,

    Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (max-width: 767px) {
#payment div.payment_box {
    width: 100%;
    padding: 0;
}
#wc-square-credit-card-credit-card-form .form-row {
    width: 100%;
}
}

    Best regards,
    Rikard

    May 1, 2020 at 3:07 pm #1208844
    jonroot

    Thanks Rikard – unfortunately it’s still not working. Here is a screenshot: https://imgur.com/a/rnsqcVC

    Let me know if there’s any other another solution.

    Thanks
    Jon

    May 2, 2020 at 7:50 am #1209059
    Rikard

    Hi Jon,

    Please try this instead:

    @media only screen and (max-width: 767px) {
#payment div.payment_box {
    width: 100% !important;
    padding: 0 !important;
}
#wc-square-credit-card-credit-card-form .form-row {
    width: 100%;
}
}

    Best regards,
    Rikard

    May 2, 2020 at 3:39 pm #1209104
    jonroot

    Hi Rikard
    Thanks – it’s better – but still not allowing me to see the full 16 digits. See screenshot here: https://imgur.com/a/WBULBZr
    Appreciate your help on this…
    Jon

    May 3, 2020 at 6:07 am #1209232
    Rikard

    Hi,

    Please try this CSS as well:

    @media only screen and (max-width: 767px) {
iframe#wc-square-credit-card-account-number-hosted input {
  font-size: 1.1em !important;
}
}

    Best regards,
    Rikard

    May 3, 2020 at 8:15 pm #1209333
    jonroot

    Hi Rikard
    I’m still having issues. Would you like to login and take a look? I am experiencing this on both my Enfold sites. Here is a screenshot, the elements on the form seem to be all jumbled as well – https://imgur.com/a/BkCgmxA

    Thanks,
    Jon

    May 4, 2020 at 6:55 am #1209429
    Rikard

    Hi,

    I added the CSS for you, please review you site.

    Best regards,
    Rikard

    May 4, 2020 at 2:55 pm #1209556
    jonroot

    Perfect – thank you Rikard!
    Jon

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Bug: Credit Card Field on Mobile’ is closed to new replies.