Form is not mobile responsive

  • lumiarts
    Asked on October 3, 2016 at 4:53 PM

    It did work, but I used the form to receive instructions for another problems and the new solutions messed your solution up. Anyway, it's even worse now. I'm confused, your instructions no longer work. Please help!

    https://form.jotformz.com/62736129927667

    Form is not mobile responsive Image 1 Screenshot 20

  • Jan
    Replied on October 3, 2016 at 7:37 PM

    I cloned your form (https://form.jotformz.com/62736129927667) and I can see that the CSS media queries is incomplete. Please erase all the CSS code from line 214 to line 247.

    Form is not mobile responsive Image 1 Screenshot 20

    After removing it, please insert this CSS code:

    @media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape) {

    li#id_4 {
    margin-bottom: 0px !important;
    padding-bottom: 0px !important;
    }

    li#id_6 {
    margin-top: 0px !important;
    padding-top: 0px !important;
    }

    label#label_6 {
    margin-top: 0px !important;
    padding-top: 0px !important;
    margin-bottom: 0px !important;
    padding-bottom: 0px !important;
    }
    }

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

    li#id_4 {
    margin-bottom: 0px !important;
    padding-bottom: 0px !important;
    }

    li#id_6 {
    margin-top: 0px !important;
    padding-top: 0px !important;
    }

    label#label_6 {
    margin-top: 0px !important;
    padding-top: 0px !important;
    margin-bottom: 0px !important;
    padding-bottom: 0px !important;
    }   

    }

    Here's a guide on How-to-Inject-Custom-CSS-Codes.

    Hope that helps. Thank you.