Payment wizard not displaying correctly on mobile

  • Profile Image
    lblanco3
    Asked on May 09, 2017 at 12:33 PM

    Hi guys, i have a payment wizard form but when i publish it the data seems to be hidden for some reason, ive had this form for months and this is new.

    Please help?

  • Profile Image
    david
    Answered on May 09, 2017 at 01:50 PM

    I checked your form on mobile and the layout looked ok on my end:

    What type of device and browser are you using that it shows incorrectly formatted?  Let us know and we will see what we can do to fix it.

  • Profile Image
    lblanco3
    Answered on May 09, 2017 at 02:31 PM

    Iphone 5, IOs 10.3.1, and i just tried on android and had the same issue, 

    Im in Costa Rica, not sure if that makes any difference?

  • Profile Image
    david
    Answered on May 09, 2017 at 03:46 PM

    Very odd, I tested on Android as well and everything was formatted correctly.  Try adding the following code to your form to see if it will properly adjust the sizing on mobile:

    https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

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

    .form-product-item .form-sub-label-container {

        display: block;

        position: initial !important;

        float: none;

        margin: 10px 0 !important;

        width: 30%;

    }

    span.form-product-item {

        height: auto !important;

        width: 100% !important;

        box-sizing: border-box;

    }

    }

  • Profile Image
    lblanco3
    Answered on May 09, 2017 at 05:29 PM

    Still nothing :(

  • Profile Image
    david
    Answered on May 09, 2017 at 06:39 PM

    Try adding the following:

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

    span.form-product-item {

        min-height: 200px !important;

        width: 360px !important;

        box-sizing: border-box;

    }
    }

    Adjust the height and width until it looks good on your end.

  • Profile Image
    lblanco3
    Answered on May 09, 2017 at 08:19 PM

    That made the trick! thank you!