Is it possible to have same configuration (2 columns) on iPad screen ?

One more thing is it possible to have same configuration (2 columns) on iPad screen ?

Please try adding this code also: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

@media screen and (max-device-width: 768px) and (orientation: portrait){

.form-line, .form-line.form-line-column {

    padding: 2% 4% !important;

}

#id_16{

    margin-top: -950px;

}

#id_17{

    margin-top: -850px;

}

#id_7{

    margin-top: -250px; 

    width: 50%;

}

#id_18{

    margin-top: -100px;

}

}

Result: https://form.jotform.com/80234912726960 

Let us know if you need more help.

Ok it work perfectly on iPad but now on iPhone it’s doesnt show properly

Regards

How about this CSS code instead:

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1){

.form-line, .form-line.form-line-column {
    padding-left: 30px !important;
    padding-right: 10px !important;
}
}

Please let us know if the problem persists.

Thanks.

Not working exactly

see my picture

This is normal, the field #9 height is bigger than the field #8 height. The field #10 cannot be placed after the field #8 due to our form layout.

You may consider replacing positions of the fields #8 and #9 to have the field #10 positioned on the right side.

It worked before so I don't think that the real problem

With the proper css it can be fixed but I don't have the skills

Apologies for any inconveniences caused. I would kindly like to request for more time to look at how we can best fix the display on iPhone issue.

I will update you on this thread on the same.

Apologies for taking long to respond. I have managed to fix the display when accessing the form on mobile phone.  Kindly inject CSS code below to your form:

@media only screen

and (max-device-width : 500px) 

and (orientation : portrait)

and (-webkit-min-device-pixel-ratio: 1){

    .form-line, .form-line.form-line-column {

       padding: 0.1% 0.1%;

        width : 50%;

        padding : none;

    }

}

@media only screen 

  and (min-device-width: 320px) 

  and (max-device-width: 480px)

  and (-webkit-min-device-pixel-ratio: 2) {

 .form-line, .form-line.form-line-column {

        padding: 0.1% 0.1%;

        width : 50%;

        padding : none;

    }

}

@media screen and (max-width: 580px), screen and (max-device-width: 767px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){

.form-line, .form-line.form-line-column {

    padding: 0.1% 0.1%;

    width: 50%;

    -moz-box-sizing: border-box;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

}

}

For tests kindly see the form below I worked on:

https://www.jotform.com/80283572981969

Kindly feel free to clone and test the form.

Can see your form and i'm a little bit confuse with all the injected css

Apologies for the confusion. The CSS codes I shared above will ensure tour form displays two columns on any android or Iphone gadgets.