Why is only some of my form mobile responsive?

  • EnergyExpress
    Asked on November 4, 2016 at 12:42 PM

    My form works and is responsive except one section on a mobile phone device.  I have included the mobile responsive widget and checked responsive in designer.  However, in one section an image is enlarged from original size and the submit button is showing center instead of left justified.  Also, if I shrink fields the form is distorted.  There is a much larger image at the top of the form and it is responsive.

    I viewed the form in Designer and on my mobile phone with the same results.

    Below shows what it should look like and following image shows the distorted view on a mobile phone. 

    Why is only some of my form mobile responsive? Image 1 Screenshot 30

     

     

    Why is only some of my form mobile responsive? Image 2 Screenshot 41

     

    What am I missing?

    https://secure.jotformpro.com/form/50745129319962

     

    Thank you,

     

  • Jan
    Replied on November 4, 2016 at 4:37 PM

    Please try injecting this custom CSS:

    @media only screen and (max-width: 40em) {
       #cid_51.form-image {
           width : 74px !important;
           height : auto;
       }

        li#id_51 {
           width : 100px !important;
       }

        li#id_51 {
           margin-left : 0px !important;
       }

        li#id_48 {
           width : 400px !important;
           margin-left : 0px !important;
       }
    }

    @media only screen and (min-width: 320px) and (max-width: 480px) {
       li#id_48 {
           width : 200px !important;
           margin-left : 0px !important;
       }
    }

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

    Why is only some of my form mobile responsive? Image 1 Screenshot 20

    Hope that helps. Thank you.