-
AmitAkAsked on July 31, 2016 at 5:10 AM
I want to prevent my form fields from overlapping while keeping the form responsive.
This is what my form looks like now:
This is what i want to achieve:
I have tried to fix this issue by setting margins on various fields,
#input_9 ,#input_8 ,#input_10 {margin-left:60px;
}
#input_2{
margin-left:180px;
}
It makes the form look exactly as i want but the form doesn't stay responsive.
This is how it looks like on mobile after applying margins:
My form is responsive right now and i need help with fixing this fields overlapping issue while keeping my form look good on mobile devices.
Regards
Page URL: https://form.jotform.me/62102552952450 -
David JotForm Support ManagerReplied on July 31, 2016 at 9:43 AM
Please go to your forms Custom CSS area and delete everything you find there, and paste the following CSS code instead: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes
.form-all{
margin-top: 200px !important;
}
.form-line-active {
background : none !important;
}
#input_7,#input_8,#input_9,#input_10,#input_2 {
background-color : #559BDB;
border-color : transparent;
color : white;
box-shadow : 0px 0px 2px blue;
}
#input_7,#input_8,#input_9,#input_10,#input_2:hover {
box-shadow : 0px 0px 4px blue;
}
#id_7,#id_8,#id_9,#id_10,#id_2{
padding-top: 0px !important;
margin-top: 0px !important;
padding-bottom: 0px !important;
margin-bottom: 0px !important;
}
#id_7{
padding-right: 5px !important;
margin-right: 0px !important;
}
#id_8,#id_9,#id_10,#id_2 {
padding-left: 5px !important;
margin-left: 0px !important;
padding-right: 0px !important;
margin-right: 0px !important;
}
.form-all{
width: 500px !important;
}
#input_7{
width: 65px !important;
max-width: 65px !important;
}
#input_9,#input_10{
height: 35px !important;
}
#input_7{
height: 43px !important;
}
#input_8{
height: 43px !important;
}
input[type="file" i]::-webkit-file-upload-button, button {
height: 43px !important;
}
#id_2{
margin-top: -3px !important;
}
@media only screen and (max-width: 480px) {
.form-all{
width: 100% !important;
}
}
Also, make sure to add the mobile responsive widget:
Results:
Desktop view:
Mobile view:
Here is my cloned version: https://form.jotform.co/62123166652855
You may clone it in your account and use it if you want to: http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL
Let us know if you need more help.
-
AmitAkReplied on July 31, 2016 at 11:03 AM
Thanks, everything works perfectly fine.
You guys have one of the best support team, Goodluck.
-
David JotForm Support ManagerReplied on July 31, 2016 at 11:14 AM
You are welcome! Open a new thread if you need anything else. :-)