Payment wizard not displaying correctly on mobile

  • lblanco3
    Asked on May 9, 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?

    Payment wizard not displaying correctly on mobile Image 1 Screenshot 20

  • David JotForm Support
    Replied on May 9, 2017 at 1:50 PM

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

    Payment wizard not displaying correctly on mobile Image 1 Screenshot 20

    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.

  • lblanco3
    Replied on May 9, 2017 at 2: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?

  • David JotForm Support
    Replied on May 9, 2017 at 3: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;

    }

    }

  • lblanco3
    Replied on May 9, 2017 at 5:29 PM

    Still nothing :(

  • David JotForm Support
    Replied on May 9, 2017 at 6: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.

  • lblanco3
    Replied on May 9, 2017 at 8:19 PM

    That made the trick! thank you!