How can I display my form properly on mobile devices?

  • Profile Image
    proapc
    Asked on October 20, 2017 at 10:02 AM
    I'm still having an issue with the form for the Braintree CC Processing. It is overlapping on my Galaxy Note phone unless I hold it in Landscape mode. I added the mobile widget and I tried the iframe code but it still runs off the right side.
    ...
  • Profile Image
    Kevin_G
    Answered on October 20, 2017 at 10:11 AM

    I have just tested your form http://www.jotform.us/form/72224895529163 in a mobile device and noticed it displays fine. I used a Galaxy Note 4 device: 

    15085086391.png

    May you please provide us a screenshot about how the form displays on your end? 

    This guide will help you uploading the image: https://www.jotform.com/help/438-How-to-Post-Screenshots-to-Our-Support-Forum 

    We will wait for your response. 

  • Profile Image
    proapc
    Answered on October 20, 2017 at 10:58 AM

    1508511512Screen.png

  • Profile Image
    Kevin_G
    Answered on October 20, 2017 at 11:58 AM

    The problem seems to happen when your form is embedded, please provide us with the link to your webpage so we can further investigate and resolve this. 


  • Profile Image
    proapc
    Answered on October 20, 2017 at 12:55 PM

     http://icabber.com/mo


  • Profile Image
    Kevin_G
    Answered on October 20, 2017 at 01:45 PM

    Please try injecting the following CSS code to your form in order to display the fields completely: 

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

      [data-type="control_braintree"]{

          height:500px;

      }

      .payment-form-table td{

          position: absolute;

          left: 0;

          width: 100%;

      }

      .payment-form-table .braintree-hosted-fields  {

          width: 95% !important;

      }

      .payment-form-table tr:nth-child(2) td:nth-child(2)  {

          margin-top: 70px;

      }

      .payment-form-table tr:nth-child(3) td:nth-child(1)  {

          margin-top: 125px;

      }

      .payment-form-table tr:nth-child(3) td:nth-child(2)  {

          margin-top: 180px;   

      }

      .payment-form-table tr:nth-child(4) td:nth-child(1)  {

          margin-top: 240px;

      }

      .payment-form-table tr:nth-child(4) td:nth-child(2)  {

          margin-top: 300px;

          

      }

    }

    This guide will help you injecting the code to your form: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    The fields need to be displayed one below each other due to the form's width when it's been embedded.

    I hope this helps. 

  • Profile Image
    proapc
    Answered on October 20, 2017 at 03:09 PM

     That worked. See http://icabber.com/mo

    Look at regular and then landscape mode to see the difference.

  • Profile Image
    jonathan
    Answered on October 20, 2017 at 04:28 PM

    I also checked and it is now working within your website using mobile browser.

    1508531285zzz 2017-10-21 04.25.38.png


    Let us know if you need further assistance.