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

  • sarahahmad
    Asked on April 14, 2017 at 5: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

     

     How to adjust the width of field when form is viewed on mobile? Image 1 Screenshot 20

  • Nik_C
    Replied on April 14, 2017 at 5: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:

    How to adjust the width of field when form is viewed on mobile? Image 1 Screenshot 20

    Please check and let us know.

    Thank you!

  • sarahahmad
    Replied on April 14, 2017 at 8: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;

        }

     

    }

     

  • Sven
    Replied on April 14, 2017 at 9: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.

  • sushirollslondon
    Replied 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

    How to adjust the width of field when form is viewed on mobile? Image 1 Screenshot 20

    Many thanks

     

  • Nik_C
    Replied on April 19, 2017 at 2:11 AM

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

    How to adjust the width of field when form is viewed on mobile? Image 1 Screenshot 30

    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:

    How to adjust the width of field when form is viewed on mobile? Image 2 Screenshot 41

    Please try and let us know how it worked.

    Thank you!

  • sarahahmad
    Replied on April 19, 2017 at 2:58 AM

    Hi, thanks for the reply.

    On jotform builder it still looks like this.How to adjust the width of field when form is viewed on mobile? Image 1 Screenshot 20

     

  • Nik_C
    Replied on April 19, 2017 at 4:11 AM

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

    How to adjust the width of field when form is viewed on mobile? Image 1 Screenshot 30

    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:

    How to adjust the width of field when form is viewed on mobile? Image 2 Screenshot 41

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