Prevent form fields from overlapping

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

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.

Thanks, everything works perfectly fine.

 

You guys have one of the best support team, Goodluck.

You are welcome! Open a new thread if you need anything else. :-)