Can I customize hover text placement for each form element on mobile?

I have a number of form elements that have hover text, and I have seen a number of forum posts on solving the issue of hover overlapping on mobile devices. The code I am using now affects all of my hover text which is either insufficient placement for some, or too much for the others. How can I manipulate the following code (or a completely different code that I can still place my text) to apply only to specific form elements? This code addresses the parameters I need to adjust on each element.

@media screen and (min-width: 10px) and (max-width: 540px) {

.form-description {

    max-width: 250px;

    top: -100px;

}

.form-description-content {

    font-size: 12px !important;

}}

Thank you,

Dan

You need to add the ID of the field if you'd like to apply the custom CSS codes to a specific field. To get the field ID, please follow our steps here https://www.jotform.com/help/146-How-to-find-Field-IDs-Names.

For example, the first field has the ID of id_3. You need to do the CSS like:

#id_3 .form-description {

max-width: 250px;

top: -100px;

}

Please try and let us know if you cannot get it to work.