How to add new line to the Sub-Heading Text

I  inserted <br> to bring June 1 - June 3, 2017 to the line below Hope College.... However this <br> became part of the text, please see preview of my form.  Please help bring June 1 - June 3, 2017 to the second line of sub-heading. Thanks.

Hi, 

Thank you for contacting us.  

Unfortunately, you cannot end a new line with HTML codes. However, you can alter the design by injecting custom CSS codes.

Please copy this text  "Hope College,Holland,MI  June 1 - June 3, 2017" into the Subheading Text Area of your header. The first blank space should be the place where the new line starts.

.form-subHeader {

    width : 160px;

    white-space : normal;

    margin-left:230px;

}

Here is the user guide on injecting custom CSS codes.

https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

Please try this solution and let us know if you encounter any problem.

Thank you.

I copied & pasted your code. Now MI became the first part of the dates. MI should be the last part of the first sub-heading.

Thanks again.

As I can understand you need the text to be displayed like this: 

To achieve that you only need to increase the field width so the final code should be this one: 

.form-subHeader {

    width : 170px;

    white-space : normal;

    margin-left : 230px;

}

Please inject it and let us know if you have any question. 

Kevin's suggestion helped, however this code also affected all other sub-headings which should not be changed.

Sub-heading for Section 2, 4 and 5 should not be narrowed down to 1/3 of the space.

Please help again. 

Hi,

You must inject this CSS codes for only affect first sub-heading:

#subHeader_418 {

    width : 170px;

    white-space : normal;

    margin-left : 230px;

}

Everyting works properly on my side. As you can see:

Please let us know if you need any further assistance.

Helen's suggestion brought back my original problem. The <br> became part of the first subheader: The correct way should be

Hope College, Holland, MI

June 1- June 3, 2017

not Hope College, Holland, MI<br>June 1- June 3, 2017

Can someone help again? Thanks.

Hi,

I have cloned your form and tested on my side. You must be delete <br> into your sub-heading.

After that, please remove this CSS code into your form:

.form-subHeader {

    width : 90% !important;

    margin : 0 auto !important;

}

And add this CSS codes that I shared with you before:

#subHeader_418 {

    width : 170px;

    white-space : normal;

    margin-left : 230px;

}

Here is form without sub-heading contain <br> :

Please test it on your side. If  you have still problem, feel free contact us.

This is still not correct. MI should be in the back of Holland,, not in the front of the dates.

Hi,

Please change the width of the subheader to 190px. This should solve the issue.

.form-subHeader {

    width : 190px;

    white-space : normal;

    margin-left : 230px;

}

Here is the screenshot of the form after the alteration above.

I hope this helps. 

Thank you.

Thanks! It worked.