Field label line breaks cause awkward layout [RESOLVED]

Is there a way to control line breaks in the field labels? I’ve got column rows of related data to enter in text fields, and the text boxes are not lining up (on tablet screens) because the line breaks are creating an extra line on some labels and not others.
does not work in the label – any ideas?

Hi,

Could you please share the URL of your live form page so I can check it to find a solution? Thank you.

Hi Faisal,
The form was not yet live when I posted, but it is now. Maintenance Report - Calhoun Truck Lines
The misaligned text boxes are in the Tire Tread Depth section, and it’s only on some tablet sizes.
Thanks for looking!

Hi,

First, use the “equal-height-label” CSS class for the specific field, as shown in the screenshot below.

Now, try the following CSS code in the child theme’s style.css file or in Appearance → Customize → Additional CSS.

@media all and (min-width: 769px) and (max-width: 1023px) {
    .equal-height-label label.gform-field-label {
        min-height: 86px !important;
    }
}

Final preview:

Give it a try, and let me know how that goes! :smile:

1 Like

Hi Faisal,
That works perfectly! Thanks so much for taking the time to help with that.

Beth

1 Like