text overlap in smartphone view | responsive break

As you can see, I highlighted the text in red that in the first image, displays correctly, but on smartphone view, (second image) the text overlaps instead of going under the other. How do we fix this? Thanks!!

Hi, I inspected your form and I think that the line-height parameter could solve your issue.

The css for text_8 includes this parameter.

#text_8 {

    font-family : Raleway;

    color : #2F2E2E;

    font-size : 21px;

    padding : 2rem 0;

    font-feature-settings : 'lnum' 1;

    line-height : 10px;

}

If you increase the height of the line to 20 or more, the problem might disappear, please give it a try and share your results. Since your font size is 21, the height sould not be lower than that. However this affects the design since the box that includes the text gets bigger when you increase the value. You need to handle that situation seperately :).

I hope this helps,

All the best!

Thanks for the solution. It kind of does work, but it has a few issues.

1) It's misaligned. I would like it to be centered.

2. It needs to decide if it will stay in one line or the other.


1)

2)

ok here is a solution, check out this article if you want to go deeper :)

inject this code to css:

after that you need to inject responsive break within the email and whatsup information into the HTML:

<br class="rwd-break" />

Also you need to delete "space" codes (&nbsp;) for both information to be alinged at center symetrically and you need to adjust font size, screen minimum width and padding amount.

Please give it a try and tell me about the result.

Hope this solves your issue.

See you.

Hey, thanks for the response!

I didn't understand the HTML part, since the editor is CSS only.

"after that you need to inject responsive break within the email and whatsup information into the HTML:

<br class="rwd-break" />"

Please try injecting the following CSS code as shown on this guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

@media only screen and (max-width: 480px) {

#id_8 {

    width: 250px;

    left: 0;

    right: 0;

    margin: auto;

}

}

Result

Let us know if you need more help.

Dear lumiarts,

The issue that you are dealing with is very hard indeed. We are here to help you. Could you please share the latest form that you are using so we could inspect it further and give you the solution that you want.

I was trying the solutions above, and I think I achieved the solution here is the result:

https://form.jotform.com/62792145241959

However I clear all css code from the injector and used contemporary CSS tool:

to add css code that @sevkiyontem gave:

* { margin: 0; padding: 0; }

After that I inject html code (<br class="rwd-break" />) that break the lines when the window width is lower than some value. In the code above it has the value 768px.

Here how you can inject html code to your contact information text box:

I suggest to clear all styling and start all over. Since you know how to style and how to code better now, you will prevent future disorders and malfunctions.

And please do not give up, this form will be one of the best mobile forms ever created with JotForm.

Cheers :)