Mobile responsive isn't working for drop-down and sub-labels

  • Profile Image
    arielyem
    Asked on May 19, 2017 at 04:08 PM

    Hi,

    My form doesn't respond the same with computer screen and mobile.

    The main problems are:

    In mobile, the drop-down wide  shrieked, while other cells responded properly to the mobile screen wide. How can i make the drop-down wide to work the same?

     

    Also, injected sub-labels do not responded in mobile too. I used the following css code for example:

    #cid_261 label.form-sub-label {

        text-align : center;

    In the computer screen it works well, but in mobile it isn't alignment to the center.

     

    Please help!

    Thanks

  • Profile Image
    Mike_G
    Answered on May 19, 2017 at 06:00 PM

    To fix the width of the drop-down field you described in your screenshot, I suggest you add the following CSS codes to your form:

    @media screen and (max-width: 480px)

    {

    #cid_401 {

    width: 100% !important;

    }

    }

     

    Result:

    As for the sub-labels, aside from having "text-align: center;", please include the following to each code for the sub-label you want to appear centered on mobile devices.

    width: auto;

    So, in your example, it will be:

    #cid_261 label.form-sub-label {

        text-align : center;

        width: auto;

    }

     

     

    Result:

    I hope this helps. If in any case, any of the instructions above is unclear or if the codes are not working, please let us know and we will be glad to test it again for you. You can also include the link to your website where the form is embedded.

    Thank you.

  • Profile Image
    arielyem
    Answered on May 19, 2017 at 07:50 PM

    Thank you - It works!

    Is there any way to make this change effective for all the dropdown, rather than do it for each dropdown separately ?

     

  • Profile Image
    John_Benson
    Answered on May 19, 2017 at 11:53 PM

    Yes, that is possible. We can provide you a custom CSS code to fix the width of all the drop down menu to your form. Could you please share the form ID or form direct link of the form where you want to inject the custom CSS code so we can check it further? 

    We'll wait for your response. Thank you.

  • Profile Image
    arielyem
    Answered on May 21, 2017 at 04:41 AM
  • Profile Image
    ashwin_d
    Answered on May 21, 2017 at 07:57 AM

    Hello arielyem,

    I have fixed this issue by injecting following custom css code in your form:

    @media screen and (max-width: 480px){

    [data-type="control_dropdown"] .form-input, [data-type="control_dropdown"] .form-input-wide {

        width: 100% !important;

    }

    }

    Hope this helps.

    Do get back to us if you have any questions or meant to ask something else.

    Thank you!

  • Profile Image
    arielyem
    Answered on May 21, 2017 at 09:40 PM

    Thanks!