Not mobile responsive

  • Profile Image
    quinnpone
    Asked on August 20, 2019 at 12:59 PM
    ref: https://form.jotformeu.com/92312675024351
    I do have another problem I can't seem to solve...
    Again, on the desktop it looks acceptable; however, on the mobile - I
    have fields displayed I would like to have on the same row...but the
    mobile puts one field on a row... see screen shot below
    I would like to have total hours on one row and then the following four
    fields (regular, company, personal and sick) on the same row.
    Can this be done?
    Thanks for your help,
    Graciela
    ---
    Kind regards,
    Graciela Quinn
    Accounts
    07729 906976
    ...
  • Profile Image
    Nik_C
    Answered on August 20, 2019 at 02:53 PM

    That is actually mobile responsiveness, that's the default behavior. To change how it works, please use this CSS:

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

    li#id_23 {

        position: relative;

        left: 19%;

        top: -78px;

    }

    li#id_22 {

        position: relative;

        left: 44.5%;

        top: -171px;

    }

    li#id_21 {

        position: relative;

        left: -5%;

    }

    li#id_41 {

        position: relative;

        left: 70%;

        top: -265px;

    }

    }

    I inserted for you, please check and let us know how it works.

    Thank you!

  • Profile Image
    quinnpone
    Answered on August 21, 2019 at 06:43 AM
    Thanks for making the changes. Took me a while to understand but
    finally got it. I was able to modify the code a bit so that fields
    looks like they are in a row. Is there any widget or app that could
    make configuring for mobile easier?
    ---
    Kind regards,
    Graciela Quinn
    Accounts
    07729 906976
    ...
  • Profile Image
    jherwin
    Answered on August 21, 2019 at 08:23 AM

    We have a mobile responsive widget here: https://widgets.jotform.com/widget/mobile_responsive. Although, sometimes some fields still require custom CSS Code so you can make it mobile responsive.

    If you need help with the CSS code, please feel free to contact us. We will be happy to help you.