Mobile responsiveness of the dropdown and single text entry fields

  • Profile Image
    PAL_Connie
    Asked on October 28, 2017 at 04:43 PM
    2. When people access the page from their mobile, the text / dropdown boxes length are out of order - the width I set for the form seems to only work on the desktop version but not mobile version. Please see comparison of the two screenshots. e.g. 'Borrowing Needs' field should be slightly longer (correct in the desktop version on page 1) but very narrow on mobile (page2). In contrast, the ‘Maximum Deposit Contribution' box are too long on mobile but right on desktop version.
  • Profile Image
    jonathan
    Answered on October 28, 2017 at 07:26 PM

    I was able to see the issue as well.


    To fix, please add this CSS codes on your form.

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

    {

    #cid_267,#cid_299,#cid_327 {

    width: 100% !important;

    }

    }


    result:


    Let us know if this did not work.


  • Profile Image
    PAL_Connie
    Answered on October 28, 2017 at 09:43 PM
    Thanks. Where do I add this? And it is for every box that not the right size?
    ...
  • Profile Image
    John_Benson
    Answered on October 28, 2017 at 10:26 PM

    To add the custom CSS code provided by my colleague, please follow this guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Please check it and let us know what other box did not change so we can check it further.

  • Profile Image
    PAL_Connie
    Answered on October 28, 2017 at 11:43 PM
    Thanks very much. Awesome.
    ...