CSS to make form responsive is not working

  • Profile Image
    pewple
    Asked on August 12, 2016 at 12:28 PM

    Lastly, I included your provided code in the CSS and I checked the "Make form responsive" option in the designer platform, but its still not responsive.

     

  • Profile Image
    John_Benson
    Answered on August 12, 2016 at 02:10 PM

    I will attend to this thread shortly, I need more time to create a custom CSS to make the form responsive. Thank you.

  • Profile Image
    pewple
    Answered on August 12, 2016 at 02:59 PM

    Ok, thank you for your time.

  • Profile Image
    John_Benson
    Answered on August 12, 2016 at 03:10 PM

    Thank you for waiting. These are the problems with the form that needs to be fixed:

    1. The small space under the State field. We need to remove the left margin in order to fix this.

    2. The "This field is required." field pop up is stretching the form horizontally in mobile devices. In order to fix this, we need to position the pop-up near the text box.

    The solution is to insert this custom CSS on your form:

    .form-address-table td:last-child .form-sub-label-container {
    margin-left: 0 !important;
    width: 100% !important;
    }

    @media (min-width:320px) {
    .form-line-error .form-error-message {
    left : 60% !important;
    }
    }

    On top of that, you also need to insert the widget called Mobile Responsive. In the Form Builder, just click the More Fields option and then search for the Mobile responsive widget. Once you find it, drag it to the form.

    Here's the result:

    Thank you for your patience. Let us know if you need further assistance. Thank you.

  • Profile Image
    pewple
    Answered on August 12, 2016 at 03:48 PM

    Thank you again for your time and detailed response. In brief, I'm saddened to report that all of the directives given to me have been applied and its still displaying the same.

     

  • Profile Image
    Welvin
    Answered on August 12, 2016 at 05:55 PM

    It turns out that you are using our lightbox embed method. Please note that our lightbox embed method is not yet designed to be responsive. We suggest embedding the form using our default embed method or the iframe method. Or, you can also install a plugin for WordPress that opens a page on a responsive modal window. I personally used Colorbox plugin: https://wordpress.org/plugins/wp-colorbox/

  • Profile Image
    pewple
    Answered on August 12, 2016 at 08:45 PM

    Hello and thank you for sharing. In response: I understand. I will give the other suggested options a try.... I'm sure one/both would prove sufficient. Continued success and thanks (to all) for your assistance.

    Bill

  • Profile Image
    liyam
    Answered on August 12, 2016 at 09:02 PM

    On behalf of the team, you are welcome.

    Feel free to get back to us anytime for any concerns, questions, or when you need assistance in any of your forms or your account.

    Warm regards,
    Liyam