How do I fix the padding issue in mobile view?

  • Profile Image
    adornedwithpolish
    Asked on September 23, 2016 at 04:13 PM

    I inserted a Stripe Payment box and I'm trying to format the rest of my form to line up with it since it seems that I am unable to directly make any changes to the actual payment box. I used the "padding" option in the CSS Editor which seemed to work great from the Desktop version of the website however when I look at the Mobile View (see attached image), everything that I padded is pushed to the right. I'd like everything to be aligned in both the Desktop and Mobile View. Is there a solution for how to fix this? Thanks!

  • Profile Image
    BDAVID
    Answered on September 23, 2016 at 08:02 PM

    Please inject the following CSS code in your form: 

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

    #id_32{

        width: 100% !important;

    }

    #customFieldFrame_32{

        height: 80px !important;

        width: 100% !important;

    }

    #id_30 table.form-address-table tr:first-child +tr+tr td:first-child span{

        width: 200px !important;

    }

    #id_30 table.form-address-table tr:first-child +tr+tr td:first-child span:last-child{

        width: 90px !important;

    }

    #id_30 table.form-address-table tr:first-child +tr+tr+tr td:first-child span{

        width: 135px !important;

    }

    #id_30 table.form-address-table tr:first-child +tr+tr+tr td:last-child span{

        width: 135px !important;

    }

    .form-line{

        padding: 0px 2px 0px 2px !important;

    }

    #id_42{

        margin-left: 60px !important;

        width: 50px !important;

    }

    }

     

    Result: https://www.jotformpro.com/form/62667744721968? 

    Let us know if you need more help, we will be glad to assist you.

  • Profile Image
    BDAVID
    Answered on September 23, 2016 at 08:03 PM

    See this guide if you do not know how to inject the code: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes