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

  • Profile Image
    Wtfuck
    Asked on January 24, 2018 at 01:14 PM

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

    1516817101Capture d’écran 2018-01-24

  • Profile Image
    BDAVID
    Answered on January 24, 2018 at 01:34 PM

    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 

    1516818826ipad.png

    Let us know if you need more help.

  • Profile Image
    Wtfuck
    Answered on January 25, 2018 at 06:43 AM

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

    15168805922F4E59DC-2165-4A03-A2BF-EFC931

    Regards

  • Profile Image
    liyam
    Answered on January 25, 2018 at 09:52 AM

    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.

  • Profile Image
    Wtfuck
    Answered on January 25, 2018 at 01:35 PM

    Not working exactly

    see my picture1516905308Capture d’écran 2018-01-25

  • Profile Image
    Mike
    Answered on January 25, 2018 at 03:13 PM

    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.

  • Profile Image
    Wtfuck
    Answered on January 26, 2018 at 05:30 AM

    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

  • Profile Image
    TREVON
    Answered on January 26, 2018 at 09:03 AM

    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.

  • Profile Image
    TREVON
    Answered on January 29, 2018 at 08:48 AM

    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.

  • Profile Image
    Wtfuck
    Answered on January 30, 2018 at 06:20 AM

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


  • Profile Image
    TREVON
    Answered on January 30, 2018 at 09:11 AM

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