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

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

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:

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:

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

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

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:

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

Let us know if you need more help.

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