-
BLueListAsked on January 28, 2018 at 9:12 AM
Question 4 of my survey is Phone Numbers. Underneath I have 3 fields: Home, Office and Mobile. I would like to indent these fields and shorten the area code and phone number text boxes without changing the rest of the form. Lastly how do I shorten the space between these fields without changing the rest of the form<
-
David JotForm Support ManagerReplied on January 28, 2018 at 10:31 AM
If this is what you want to accomplish:
You can inject the following code:
#id_115,#id_116,#id_117{
width: 50% !important;
}
.phone-separate{
margin-left: -7% !important;
}
#id_115,#id_116{
padding-bottom: 0px !important;
}
#id_116,#id_117{
padding-top: 0px !important;
}
Let us know if you need more help.
-
BLueListReplied on January 28, 2018 at 12:13 PM
I injected the above code and saved yet no change happened. The fields in question look the same.
-
David JotForm Support ManagerReplied on January 28, 2018 at 1:27 PM
I have injected the code in your form, and it has now taken effect. Please check again.
-
BLueListReplied on January 29, 2018 at 9:38 AM
1) It is better. But, there is still a lot of vertical space between: 4. Phone Number(s) and Home
2) Home, Office and Mobile are still not indented
-
David JotForm Support ManagerReplied on January 29, 2018 at 11:30 AM
1) Inject the following code to shorten the vertical space between those two fields:
#id_118{
padding-bottom: 0px !important;
}
#id_115{
padding-top: 0px !important;
}
Also, I would suggest you to inject this code, so the form display fine in mobile view:
@media screen and (max-width: 480px), screen and (max-device-width: 767px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){
.form-all {
width: 100%!important;
}
}
2) On regards of the "Home, Office and Mobile are still not indented", could you share a screenshot of how it looks on your end? https://www.jotform.com/help/438-How-to-Post-Screenshots-to-Our-Support-Forum
Here is how it looks on mine:
Do you want to move those field a little bit to the right?
-
BLueListReplied on January 29, 2018 at 12:19 PM
Yes, I would like to move these fields a little bit to the right.
-
David JotForm Support ManagerReplied on January 29, 2018 at 12:59 PM
Inject this code:
#id_115,#id_116,#id_117{;
margin-left: 5% !important;
}
Note: you can increase the percentage if you want it more to the right.
-
David JotForm Support ManagerReplied on January 29, 2018 at 1:01 PM
Sorry, previous code has an extra character, this is the correct one to indent those fields:
#id_115,#id_116,#id_117{
margin-left: 5% !important;
}
-
BLueListReplied on January 29, 2018 at 1:10 PM
Thank you!