Help on improving the form's mobile and desktop display.

  • Profile Image
    lumierex5
    Asked on April 23, 2019 at 12:14 PM

    Hi all,

    I will appreciate if you could help sort out the issues with a form I just created, I have listed the issues I have below:

     

    1.   Date field should be one line on web and the fields show be wider on mobile, I'm currently using the birthday picker widget and it shows the date field in 2 lines on web. The mobile view shows the 3 boxes on one line but I need each individual box to be wider.

    2.  I also need to increase the width of form fields on columns with 2 fields on mobile ( I need it to be wider than it is atm for mobile only)

    3.  Image on form not working when I open the link on the web

    4.  I don't know why my First Name field is justified to the right, help me look into this as well.

     

    Thanks

     

    P.S 1 &2 are very important

     

     

  • Profile Image
    BDAVID
    Answered on April 23, 2019 at 02:12 PM

    1) To position the 3 dropdowns of the Date Picker field in one line in desktop view, please inject this CSS code: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    #id_11 > #cid_11 > div > span:nth-of-type(2){

        margin-right: 1.6%;

    }

    Result:

    1556041639result.png

    In regards to making them wider in mobile view, please inject this code:

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

    #id_11 > #cid_11 > div > span.form-sub-label-container{

        width: 40% !important;

    }

    }

    Result:

    1556042367wider.png

    In regards to issues 2 and 3, I will work on then and get back to you as soon as possible.

  • Profile Image
    lumierex5
    Answered on April 23, 2019 at 02:35 PM

    I just tried what you suggested but nothing changed when I checked via web and mobile.

  • Profile Image
    BDAVID
    Answered on April 23, 2019 at 02:41 PM

    Solution for issue 1(update): I did not notice that there was another Date Picker field at the bottom, please include this code to make it wider in mobile view:

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

    #id_14 > #cid_14 > div > span.form-sub-label-container{

        width: 30% !important;

    }

    }

    Solution for issue 2:

    Please inject the following code:

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

    .form-all{

        width: 100% !important;

    }

    .form-line.form-line-column {

        width: 186px !important;

    }

    }

    Issue 3: could you illustrate with a screenshot the issue? https://www.jotform.com/help/438-How-to-Post-Screenshots-to-Our-Support-Forum

    Solution for issue 4:

    You need to enable the "Move to new line" advance option for that "First Name" field:

    1556044635movedtonewline.png

    See the result in my clone version: https://form.jotform.com/91125045930955

    1556044831result_001.png

    Let us know if you need more help.

  • Profile Image
    lumierex5
    Answered on April 23, 2019 at 04:17 PM

    I've been able to sort everything out. How can I add placeholders to the Birthday date picker fields as well as get rid of the sublabels?
  • Profile Image
    BDAVID
    Answered on April 23, 2019 at 04:22 PM

    Your new question will be addressed in the following thread: https://www.jotform.com/answers/1801458