Alignment of Elements Within 2 Column Form

I'm in the process of creating a two column form, but am currently unable to align the elements with the others in the same column. It's like a different amount of margin is being applied. How can I force the elements to align with the other elements within that column? 

Feel like i'm missing something simple. 

We can assist you for setting the position of your fields. But for now, I would like to know how you would like your fields to be placed.

We'll look forward to your response.

Thanks for coming back to me Liyam. I am happy with the alignment of the top two fields (i.e top line of fields), and would like the fields below to follow that alignment for the entire column eg. email field is left aligned with the field above.

I am going to add more columns, but thought it made sense to tackle this first. 

Thanks in advance for your help.

Thank you for the additional information.

If you want to force shrunk fields to appear on the left side of the form, I suggest that you enable the "Move to a new line" option of those fields.

The fields that you want to appear on the right side of the form should have that option disabled.

Here's also a guide that you may use as a reference — Setting-up-Form-Columns

If you have other questions, please do not hesitate to let us know.

Hi Mike,

Thanks for the response, although I think I may not have been clear in my previous response. I'm looking to left align the fields within their columns, keeping the two column format. The "move to a new line" seems to left align all of the fields effectively moving them all into one left column.

I've added a screenshot below in which the red lines depict how I would like the fields to be aligned. 

Try this code:

.form-line.form-line-column.form-col-3 {

    margin-left : -15px !important;

}

.form-line.form-line-column.form-col-5 {

    margin-left : 70px !important;

}

.form-line.form-line-column.form-col-4 {

    margin-left : 20px !important;

    width : 240px !important;

}

And it should look like this:

Note: I also turned the spread to columns for the radio buttons off.

Thanks aubreybourke.

Does that mean i'm going to have to add custom padding for each field as I progress down the page? I'm planning on adding 20+ fields to each column, so would be good to find a consistent approach. Is there no way of making them 'snap' to the same point? Will this also work when you take responsive into account? 

Yes, with the code my colleague provided you would need to add a single piece of code per field; however, with this one you will affect all the fields displaying in columns at the same time:

.form-line-column{

    padding-left: 15px !important;

}

Please note that you will need to remove all the existing CSS code on your form in order to have this code working. 

On mobile devices, the fields will display on block, they cannot be displayed inline since that will be a bit distorted layout. 

I hope this helps. 

Hi Kevin, 

Since your last question is not related to the original one asked  here, I have moved it to  another thread, we will assist you as soon as possible here: https://www.jotform.com/answers/1389664- 

Thanks.