-
sarahahmadAsked 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
-
Nik_CReplied 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:
Please check and let us know.
Thank you!
-
sarahahmadReplied 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;
}
}
-
SvenReplied 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.
-
sushirollslondonReplied 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
-
Nik_CReplied on April 19, 2017 at 2: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!
-
sarahahmadReplied on April 19, 2017 at 2:58 AM
Hi, thanks for the reply.
On jotform builder it still looks like this.
-
Nik_CReplied on April 19, 2017 at 4: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