Label not wrapping as it shows in form preview

How can I make the label wrap properly?

Form Builder

Actual Form

In the form builder everything shows properly and is aligned the way I want it, but when I open the actual form the labels don't wrap.

I have attempted CSS code as shown below, but nothing seems to work

#id_61 {

 width:375px !important;

 word-break: break-word !important

}

#label_61 {

 width:353px !important;

 word-break: break-word !important;

}

.form-dropdown {

 word-break: break-word !important;

}

Hi Benjamin, 

Thanks for reaching out to Jotform Support. Can you change your CSS code to code below? Let me show you how to do that:

• Open your form in Form Builder and click on the blue Paint Roller icon on the right side of the screen.
• Under the Styles tab, delete your code and paste the code below into the Inject Custom CSS area.

#input_62_full {

width: 353px !important;

}

#id_62 {

  width:375px !important;

}

#id_61 {

  width:375px !important;

  white-space: normal !important;

}

#label_61 {

  width:353px !important;

  white-space: normal !important;

}

.form-dropdown {

  word-break: break-word !important;

}

.form-label {

  word-wrap: word-break !important;

}

.configurable-list-field-label {

  word-break: break-word !important;

}

This is what it looks like after changing the CSS Code:

Give it a try and let us know if you have any other questions.

BOOM! That is perfect! Thank you very much!

One last question if you don't mind, is there a way to put each of the above sections inside of a container like the image below? I don't see any type of container option that I can drag in, and I know I can't edit the HTML directly, so just curios.

Hi Benjamin, 

If I understand correctly, you would like to store all three fields in a container to display the related fields in a single column. Is that correct? If yes, unfortunately, it is not possible. You can only arrange the form elements on the form by row.

Let us know if there’s anything else we can help you with.