How to make the payment section mobile responsive?

  • Profile Image
    ImmanuelE
    Asked on June 27, 2017 at 11:29 AM

    Hello, my form looks like this on my WordPress website. (on computer)

    But on my phone, the end of the form, looks like this:

    Ive already tried adding to my website via "Embed" "IFrame" and "Wordpress.org" but it still shows up like that on my phone. I also downloaded the mobile responsiveness widget. Nothings working.

    Thank you for any assistance you can provide, Immanuel

  • Profile Image
    ImmanuelE
    Answered on June 27, 2017 at 01:07 PM

    Solved!

    Simply turn scrolling on in the iFrame code. The phone will then scroll horizontally and vertically through entire form.

    Sorry for the trouble

  • Profile Image
    Kevin_G
    Answered on June 27, 2017 at 01:11 PM

    Glad to know you found a workaround on this @ImmanuelE. 

    I would also like to share you this code that will reduce the payment fields size so your users do not need to scroll: 

    table.form-address-table.payment-form-table input {

        width: 98% !important;

    }

     

    table.form-address-table.payment-form-table iframe{

        width: 90% !important;

    }

    This guide will help you injecting the code: How-to-Inject-Custom-CSS-Codes

    Hope this helps. 

  • Profile Image
    ImmanuelE
    Answered on June 27, 2017 at 01:26 PM

    Thanks alot!