Word Wrap in a Form Field's Sub Label

  • Profile Image
    tdiintl
    Asked on July 01, 2013 at 12:09 PM

    Hi!  I'm using the theme "solid" for some online quote request forms.  On my large screen the forms look fine but when I try it on my phone or on a very small screen some of the elements are too wide.

    For instance, I have a form field using a text box and that text box is 400px wide.  I have a sub label with some text in it.  When viewed on the small screens the text goes beyond the gray box used in the theme.  I need to have the text wrap if possible.

    If not, perhaps the gray box behind the fields could be made a bit wider?  Either solution would be fine with me, thanks!

  • Profile Image
    Welvin
    Answered on July 01, 2013 at 01:17 PM

    Hi,

    Please try to inject this custom mobile CSS query to your form so the field label width will adjust when viewed on mobile devices:

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

    .form-sub-label {

    width: 250px;

    }

    .form-sub-label-container {

    white-space: normal;

    }

    }

    Here'e the guide on how you can inject this to the form: How to Inject Custom CSS Codes

     

    Let us know for the results.

    Thanks

  • Profile Image
    tdiintl
    Answered on July 01, 2013 at 02:59 PM

    I will definately give that a try and thank you!  Is there a way to word wrap though?  We do have a decent amount of visitors using smaller resolution monitors as well.  I need to make sure it looks good for them too.

  • Profile Image
    Mike_T
    Answered on July 01, 2013 at 03:30 PM

    Yes, please try Welvin's code, it should add the word wrap too.

    For example, on some old device with 320x480 resolution it will be like this:

    Thank you.

  • Profile Image
    tdiintl
    Answered on July 01, 2013 at 03:43 PM

    Ok thanks!  As soon as I get a chance to try one and test it out I will post my results

  • Profile Image
    tdiintl
    Answered on July 01, 2013 at 04:41 PM

    Works like charm :) thanks guys!

  • Profile Image
    pinoytech
    Answered on July 01, 2013 at 04:52 PM

    On behalf of my colleague Welvin, you are quite welcome! If you need our assistance again, feel free to contact us at anytime.

    Have a nice day!