Label text alignment of multuple choice field

Good morning, 

I am trying to align my multiple choice text to the left. To illustrate, I have attached the screen shots of what the published form looks like. In the build function the labels are great. 

Is there any way I can get it to look in the published form as it does int he build?

The form is: https://form.jotformeu.com/83532385622357

Many thanks

Nicholas

Inject the following CSS into your form to align the text as you mention in the preview:

#input_12_0, #input_12_1, #input_12_2, #input_12_3, #input_12_4, #input_12_5, #input_12_6, #input_12_7, #input_12_8, #input_12_9, #input_12_10, #other_12, #input_12{

  float:left !important;

  position:relative !important;

}

#label_input_12_0, #label_input_12_1, #label_input_12_2, #label_input_12_3, #label_input_12_4, #label_input_12_5, #label_input_12_6, #label_input_12_7, #label_input_12_8, #label_input_12_9, #label_input_12_10, #other_12, #label_input_12 {

position: relative !important;

    float: left !important;

    width: 88% !important;

}

Thanks for your response. I inserted the code you sent me which partially improved the label indents.

However, I wondered whether you could help sort out the rest. The link to te for is:

https://form.jotformeu.com/90072157981359

I have attached two screen shots for you to look at (this is in preview).

Thanks so much

Nicholas

Could you try injecting the following CSS code to the form to display the labels on a single line?

.form-multiple-column .form-radio-item, .form-multiple-column .form-checkbox-item {

  width: 210px;

}

Please see the cloned version of your form below to check if you are trying to achieve the same?

https://form.jotform.com/90093245690963

Please get back to us if you need any further assistance. We will be happy to help. 

It's much better, thanks so much.
But two things though, the first is that it doesn't apply to all the
label headings and the second is that I see that the question headings
have been squeezed whereas they used to go across the page
Any suggestions?
Thanks again
Nicholas
...

Add the following CSS to the code my colleague has provided to make the label headings cover the whole page:

.form-label.form-label-auto {

    display: block;

    float: none;

    text-align: left;

    width: 100% !important;

}

So the full code will be as below:

.form-multiple-column .form-radio-item, .form-multiple-column .form-checkbox-item {

  width: 210px;

}

#input_12_0, #input_12_1, #input_12_2, #input_12_3, #input_12_4, #input_12_5, #input_12_6, #input_12_7, #input_12_8, #input_12_9, #input_12_10, #other_12, #input_12, #input_55_27 {

  float:left !important;

  position:relative !important;

}

#label_input_12_0, #label_input_12_1, #label_input_12_2, #label_input_12_3, #label_input_12_4, #label_input_12_5, #label_input_12_6, #label_input_12_7, #label_input_12_8, #label_input_12_9, #label_input_12_10, #other_12, #label_input_12, #label_input_55_27 {

position: relative !important;

    float: left !important;

    width: 88% !important;

}

.form-label.form-label-auto {

    display: block;

    float: none;

    text-align: left;

    width: 100% !important;

}

Notice I have added #label_input_55_27 and #input_55_27 ( highlighted in red ) to fix the select option that was not correctly aligned: United Kingdom - England/Wales/Ireland.

You can add the styles to the CSS as above for any of the options that are not aligned by inspecting the code with Chrome Developer Tools and identifying the field ID names. This can also work for new options you add to the form as well.

Thanks so much.

I still don't understand why everything shows as perfectly aligned in the build state, but not in the preview/view. And it's also inconsistent as some sections are fine and others not.

But I can live with what I have.

https://form.jotformeu.com/90094356258361