Multiple Payment form responsiveness

  • Profile Image
    sites4restaurants
    Asked on November 23, 2015 at 05:24 PM

    Hi,

     

    I have followed the steps in this guide: http://www.jotform.com/help/182-How-to-Create-a-Basic-Multiple-Payment-form on how to create a form with multiple payments. However, the form I have made does not work on mobile. The iframe does not fit on the mobil device and seems to just end abruptly.

    The demo form is here: https://form.jotform.com/53265518705963

    Is there a way to fix it so that the 'Cash on Delivery' payment form works on mobile.

    Thanks

    Charlie

  • Profile Image
    Chriistian
    Answered on November 23, 2015 at 09:01 PM

    Hi,

     

    I'm currently checking up your form and testing some custom CSS codes. I'll get back to you as soon as possible.

  • Profile Image
    Chriistian
    Answered on November 23, 2015 at 09:12 PM

    Can you try inserting the CSS code below in your Iframe embed settings and see if you like the results?

    @media only screen and (max-width: 480px) {

    iframe{

    width: 100% !important;

    }}

     

     

    I have tested it on my cloned form #53268302895967.

     

    Do let us know if you need further assistance.

    Regards.

     

  • Profile Image
    sites4restaurants
    Answered on November 24, 2015 at 05:45 AM

    Seems to work on your clone form fine but when I try it nothing seems to happen!

    Charlie

  • Profile Image
    Charlie
    Answered on November 24, 2015 at 08:54 AM

    Could you try adding this custom CSS code in your Form Designer Tool under "CSS tab":

    @media only screen and (max-width: 480px){

        #customFieldFrame_13 {

            width : 100% !important;

        }

    }

    Paste it inside the area under the CSS tab.

     

    You can also check my test form here: https://form.jotform.com/53273668179973? 

    Note: Please do remove the CSS code you paste inside the widget settings just to make sure that it won't conflict with the new one that we added.