Why my form is not mobile responsive?

  • lesAS
    Asked on February 11, 2017 at 10:29 AM
  • Nik_C
    Replied on February 11, 2017 at 11:46 AM

    I assume that you're referring to this form:

    Why my form is not mobile responsive? Image 1 Screenshot 20

    I added a Mobile responsive widget to your form, please check and let us know if it works as intended now?

    We'll wait for your response.

    Thank you!

  • lesAS
    Replied on February 12, 2017 at 2:17 PM

    I have check and from my cellphone it is not working. I see half of my form (larger).

  • Jan
    Replied on February 12, 2017 at 5:51 PM

    I was able to replicate the issue. Please give me more time to work on this problem. I will contact you once I have a solution. Thank you.

  • Jan
    Replied on February 12, 2017 at 6:46 PM

    Thank you for waiting. Please try the following steps:

    1. In Form Builder V4, click the "Form Designer" button at the right.

    Why my form is not mobile responsive? Image 1 Screenshot 60

    2. Scroll down and click the "Advanced Designer" button.

    Why my form is not mobile responsive? Image 2 Screenshot 71

    3. Go to the "Form Layout" section and enable the "Make this form responsive" option.

    Why my form is not mobile responsive? Image 3 Screenshot 82

    4. After that, go to the "CSS" tab and paste the CSS code below:

    Why my form is not mobile responsive? Image 4 Screenshot 93

    @media only screen and (max-width: 40em){
        .form-line.form-line-column {
            margin-left : 0px !important;
        }
        img.headerimg.pngfix {
            text-align : left !important;
        }
        tr {
        text-align: left !important;
        }
        .wordwrap .pspan {
        text-align: left !important;
        }
        .wordwrap .ispan {
        text-align: left !important;
        }
        #header {
        margin-left: 0px !important;
        margin-right: 0px !important;
        }
        .pagemargins {
        padding-left: 0px !important;
        padding-right: 0px !important;
        }
    }

    Here's the result:

    Why my form is not mobile responsive? Image 5 Screenshot 104

    Hope that helps. Thank you.