CSS to make form responsive is not working

  • 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.

     

    CSS to make form responsive is not working Image 1 Screenshot 20

  • John_Benson
    Replied on August 12, 2016 at 2: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.

  • pewple
    Replied on August 12, 2016 at 2:59 PM

    Ok, thank you for your time.

  • John_Benson
    Replied on August 12, 2016 at 3: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.

    CSS to make form responsive is not working Image 1 Screenshot 50

    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.

    CSS to make form responsive is not working Image 2 Screenshot 61

    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.

    CSS to make form responsive is not working Image 3 Screenshot 72

    Here's the result:

    CSS to make form responsive is not working Image 4 Screenshot 83

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

  • pewple
    Replied on August 12, 2016 at 3: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.

     

  • Welvin Support Team Lead
    Replied on August 12, 2016 at 5: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/

  • pewple
    Replied on August 12, 2016 at 8: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

  • liyam
    Replied on August 12, 2016 at 9: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