Why is only some of my form mobile responsive?

  • Profile Image
    EnergyExpress
    Asked on November 04, 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. 

     

     

     

    What am I missing?

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

     

    Thank you,

     

  • Profile Image
    Jan
    Answered on November 04, 2016 at 04: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:

    Hope that helps. Thank you.