Having problems to get a form that works on moblile and desktop

  • Profile Image
    hammerto
    Asked on March 20, 2019 at 03:36 AM

    Hi,

    I am trying to get a good looking form that works fine on mobile resolutions.

    The desktop version looks fine. The problem is that the form is combined with a backbroung image, a banner (LOGO), and a footer.

    On mobile version it falls apart.

    BR

    TKH



  • Profile Image
    Victoria_K
    Answered on March 20, 2019 at 06:32 AM

    Unfortunately, you have not specified how you would like to display fields on mobiles. 

    I can suggest the following:

    You can inject this CSS code to the form:

    How-to-Inject-Custom-CSS-Codes

    @media screen and (max-device-width: 40em) {

    .form-all:before {

        background-position: bottom center !important;

    }

    .form-all {

      margin-top: -5em !important;

      top: 10em !important;

      margin: auto;

      background-size: contain;

    }

    li {

      width: 65% !important;

      margin-top: -0.5em !important;

      margin-bottom: 0 !important;

      padding-top: 0 !important;

      zoom: 0.95 !important;

    }

    li:first-child {

      margin-top: -2em !important;

    }

    li:nth-child(2) {

      margin-top: -1.5em !important;

    }

    label {

      padding-bottom: 0 !important;

    }

    .form-sub-label {

      margin-top: -0 !important;

    }

    #id_5 {

      position: absolute;

      bottom: 8em;

      right: 3em;

    }

    #id_9 {

      width: 100% !important;

      padding: 0 !important;

    }


    }

  • Profile Image
    Tommy
    Answered on March 22, 2019 at 08:33 AM

    Thanks for your help :)