Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • October 1, 2020 at 3:42 am #1249773
    jonroot

    Hi guys

    The credit card area on mobile is cut off at checkout. I am on an Iphone 8. Here’s a screenshot: https://imgur.com/a/vbFZDFZ

    I do have some CSS that you gave me last year to resolve this, but it seems to have stopped working. Could you suggest a fix for me?

    Thank you!

    Jon

    October 3, 2020 at 4:37 am #1250226
    Rikard

    Hey Jon,

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

    @media only screen and (max-width: 767px) {
#top #payment div.form-row {
    padding: 0;
}
}

    Best regards,
    Rikard

    October 5, 2020 at 6:44 pm #1250634
    jonroot

    Hi Rikard
    Almost there – it still cuts off some of the credit card number field. See screenshot here: https://imgur.com/a/vAjJzEN
    Jon

    October 7, 2020 at 5:30 am #1251018
    Rikard

    Hi Jon,

    We can’t target the font size of those fields with CSS, since they are added as iframes. We can target everything outside of the fields though, but I’m not sure exactly what you would like to reduce or remove. Please try to specify that a bit further so that we can give you some custom CSS to use.

    Best regards,
    Rikard

    October 7, 2020 at 3:42 pm #1251175
    jonroot

    Hi Rikard
    It’s whatever you suggest really – I’m on an iPhone 8 and when I enter the credit card number it cuts off the last digit, so the consumer may be confused or think that they haven’t entered the number entirely. Is it possible to make the credit card field frame slightly wider? I’m having this issue on two sites that I’ve built with Enfold… perhaps it’s just the iPhone 8 being too narrow?
    Jon

    October 9, 2020 at 4:14 am #1251599
    Rikard

    Hi,

    Thanks for the update. Please try this CSS as well:

    @media only screen and (max-width: 767px) {
.woocommerce-checkout-payment {
    border-width: 0;
    background-color: transparent;
}

#payment ul.payment_methods {
    padding: 1px;
}
}

    It should remove that containing element which doesn’t really do anything anyway.

    Best regards,
    Rikard

    November 5, 2020 at 11:05 pm #1258745
    jonroot

    Hi Rikard
    Thanks for the code… still having issues man… anything else you can suggest? Here’s a screenshot: https://imgur.com/a/lrL1kX3
    Jon

    November 7, 2020 at 7:49 am #1259009
    Rikard

    Hi,

    Please try this instead:

    @media only screen and (max-width: 767px) {
.woocommerce-checkout-payment {
    border-width: 0 !important;
    background-color: transparent !important;
}

#payment ul.payment_methods {
    padding: 1px !important;
}
}

    Best regards,
    Rikard

    December 19, 2020 at 11:16 pm #1268693
    droofin

    Hi there, just thought I’d bump this post— I’m also experiencing this issue with my Enfold sites.

    December 20, 2020 at 5:57 pm #1268811
    Victoria

    Hi droofin,

    Please open a new ticket for your problem. Provide us admin access to have a deeper look into the issue, as well as precise links where we can see the issue. Screenshots highlighting what’s going on would help a lot (imgur.com, dropbox).

    Best regards,
    Victoria

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