How to adjust the width of field when form is viewed on mobile?

  • Profile Image
    sarahahmad
    Asked on April 14, 2017 at 05:01 AM

    Hi Jot support,

    I tried to add same code but no use. I want the field name of second box just beside (left) of it. But it's placed on it's top. It should looks like €23.22 on mobile screen, but it looks

             €

          23.00

     

    Link: https://form.jotform.me/71003027736447

    Thanks

     

     

  • Profile Image
    Nik_C
    Answered on April 14, 2017 at 05:51 AM

    I removed your media queries and inserted a new one, please find below:

    @media only screen 

    and (min-device-width : 375px) 

    and (max-device-width : 667px) {

      

      label#label_6 {

        float: left!important;

        margin-bottom: -25px;

        width: 20px!important;

    }

      div#cid_6 {

        width:384px!important;

        margin-left: 4px;

    }

    }

    Copy and paste instead of the one you already have in your Custom CSS Field. It should look like this:

    Please check and let us know.

    Thank you!

  • Profile Image
    sarahahmad
    Answered on April 14, 2017 at 08:06 AM

    Thanks alot for your help.

    howsoever i've done few changes, to make it exact on nexus 5

    @media only screen 

     

    and (min-device-width : 375px) 

     

    and (max-device-width : 667px){

        label#label_6 {

            margin-bottom : -20px;

            width : 100px!important;

          float:left;

          padding-left:110px;

        }

     

        div#cid_6 {

            width : 94px!important;

            margin-left : 15px;

        }

     

    }

     

  • Profile Image
    Sven
    Answered on April 14, 2017 at 09:05 AM

    Thanks for sharing your solution with us @sarahahmad.

    Please don't hesitate to contact us if you have any other issues.

     

    Thank you.

  • Profile Image
    sushirollslondon
    Answered on April 18, 2017 at 11:18 PM

    Hi Jotsupport,

    I was testing my amended code on iphone, but it didn't worked there. Then I reverted back the code as you suggested about, but it's not working anywhere. 

    Here is new form link: https://form.jotformeu.com/70404535879362

     

    Here is desktop view and its all perfect. I want it to be displayed as it is on mobile screen. i.e euro is just written besides 20.00

    Many thanks

     

  • Profile Image
    Nik_C
    Answered on April 19, 2017 at 02:11 AM

    Please try replacing this code in Media query block in your Custom CSS Field:

    With this code:

    label#label_6 {

        float: left!important;

        margin-bottom: -25px;

        margin-left:95px;

        width: 20px!important;

    }

      div#cid_6 {

        width: 350px!important;

        margin-left: 77px;

    }

      #input_6 {

        width:120px!important;

    margin-top:-10px;

        margin-left: 35px;

    }

    It should look like this:

    Please try and let us know how it worked.

    Thank you!

  • Profile Image
    sarahahmad
    Answered on April 19, 2017 at 02:58 AM

    Hi, thanks for the reply.

    On jotform builder it still looks like this.

     

  • Profile Image
    Nik_C
    Answered on April 19, 2017 at 04:11 AM

    I tested the form again in iPhone 6 simulator and this is how it shows:

    But I assume that the testing you did in our designer is for iPhone 5/5s so here is the code you need to insert:

     

    @media only screen 

    and (min-device-width : 320px) 

    and (max-device-width : 568px){

        #input_6 {

            margin-left : 10px!important;

            width : 70px!important;

        }

     

        #cid_6 {

            width : 92px!important;

        }

     

        #label_6 {

            margin-left : 90px!important;

            margin-right : -5px!important;

        }

     

        #id_6 {

            display : -webkit-inline-box;

        }

    }

    It should look like this:

    And here is my test form as well: https://form.jotformpro.com/71080816602955