Form is not mobile responsive

  • Profile Image
    lumiarts
    Asked on October 03, 2016 at 04: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

  • Profile Image
    Jan
    Answered on October 03, 2016 at 07: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.

    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.