Mobile layout change

  • Profile Image
    mcmil101
    Asked on October 20, 2015 at 02:48 PM

    Hi, My form is displaying strangely on mobile.

    On my desktop form, the labels appear to the left of the text boxes. On mobile, they are above the text boxes and right justified. I am fine with them being above on mobile, but I would like them to appear above and left justified. Is there a way to accomplish this? Thanks!

     

     

  • Profile Image
    KadeJM
    Answered on October 20, 2015 at 05:28 PM

    To my understanding you would like for your form labels on mobile to be on the left.

    I didn't see a link to your form but I found this one http://www.jotform.us/form/52855253611151 on your account that looks similar to the screenshot. Is that the right form?

    This should be possible with a couple of css tweaks for mobile devices.

    To do this for mobile we'll need to use " @media screen " and inject that into the css box or css helper inside the form designer.

    There appears to be a conflict with other existing css on top of the fact that I noticed the form label is set to the right so i'll need a little bit of extra time to look into fixing this for you and we will provide you with an updated solution asap.

  • Profile Image
    mcmil101
    Answered on October 20, 2015 at 05:36 PM

    Great. Thank You so much!

  • Profile Image
    KadeJM
    Answered on October 20, 2015 at 05:54 PM

    Good News, I believe I've managed to fix it for you or at least it looks fixed on my end but do let me know if you come across any issues with it on your end.

     

    Here's an Updated Copy of your Form for You: 

     https://form.jotform.com/52926589609169?   [CLONE ME!]

     

    Here's the Updated CSS to Inject:

    @media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape) {

    .form-label {text-align: left !important;}}

    Note: You can add the Updated CSS to the very bottom of your existing css if you want or just clone the updated copy back into your jotform account.

     

    Mobile Result:

  • Profile Image
    mcmil101
    Answered on October 20, 2015 at 06:33 PM

    Fantastic! it worked. Thank you SO much!!