Wrap form builder field titles in minimized or mobile browsers

Title
Wrap form builder field titles in minimized or mobile browsers
URL Name
Wrap-form-builder-field-titles-in-minimized-or-mobile-browsers

Question

How to avoid Form Layout field names overlapping each other on mobile devices or reduced sized windows?

Answer

To avoid Form Layout field names overlapping each other on mobile devices or reduced sized windows, simply navigate to the forms cog wheel and select styles. Then paste the following:

@media (max-width: 800px) {
   /* this targets all fields */
   .kw-fieldWrapper .kw-fieldTitle label {
       max-width: 150px;
   }

This will automatically wrap your fields on your forms when the screen-size goes below 800px and size the fields with a max width of 150px.

Feel free to adjust these values to achieve your desired outcome on the mobile devices or minimized windows.

Security, Compliance & Governance