Form not responsive in mobile devices - Specially Radio button

  • Profile Image
    nimiwal
    Asked on May 27, 2014 at 11:01 PM

    Please check the snapshots. http://oi62.tinypic.com/34dmot1.jpg

    Here is my form embedded http://newremotes3.4glabs.co.in/

    The issue is it is not being displayed correctly in mobile devices i.e. winodows phones and iphones.

    The Radio Button text is not adjusting. Please let me know what do I need to do.

    I am comfortable with edting css and html.

    Regards,

  • Profile Image
    Cesar
    Answered on May 28, 2014 at 12:37 AM

    I do see that you have obtained your form's source code and embedded it directly on the page. We do recommend to use the iFrame Embed Method as the go to choice for mobile response forms.

    In any case, do try injecting the @media only CSS code to your form:

    @media only screen and (max-device-width: 550px){
    .form-all {
    width:200px !important;}}

    Please follow this guide on How-to-Inject-Custom-CSS-Codes for more information.
    Do let us know if you need further assistance. Thank you.
  • Profile Image
    nimiwal
    Answered on May 28, 2014 at 02:48 AM

    Thank you for your response! I tried using iframe as well. Injected the custom css code as well.

    but it still runs out of the mobile screens. I searched your forum to find out that using source code was a good idea to make the form responsive but it didn't worked for me. 

    I only need Radio option text to fit the mobile screens. Rest is not an issue.

  • Profile Image
    NeilVicente
    Answered on May 28, 2014 at 05:14 AM

    @nimiwal

    I have injected the following CSS to your form:

    .form-radio-item label, .form-checkbox-item label {
        display: block !important;
        margin-left: 19px;
        margin-top: -17px;
    }
    @media only screen and (max-width: 550px){
        .form-all {
            width:100% !important
        }
        .form-radio-item label {
        white-space:normal;
        }
    }

    Check out your site and let me know if you're still having issues.

  • Profile Image
    nimiwal
    Answered on May 28, 2014 at 05:16 AM

    Thanks a lot dear! You have saved me! My client was almost about to go away! Thanks again!