How can I force my form to be rendered in 3 columns in mobile?

  • Profile Image
    thealgolab
    Asked on November 13, 2018 at 03:02 PM

    Hi: You will note on the screen shot attached that the capital field, the Leverage buttons, and the performance results are all in 3 columns (I used SHRINK for force them to stay on the same line). On mobile, then line up vertically in a column, and do not stay in a horizontal row.

    Thanks

  • Profile Image
    Nik_C
    Answered on November 13, 2018 at 05:03 PM

    Please try adding this CSS to your Custom CSS Field:

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

      li#id_43 {

        width: 100px!important;

    }

    li#id_41 {

        width: 100px;

    }

    li#id_55 {

        width: 152px;

    }

    }

    That should handle how the fields are showing when viewed on mobile:

    1542146604Screen Shot 2018-11-13 at 11.0

    Please try and let us know how it worked.

    Thank you!

  • Profile Image
    thealgolab
    Answered on November 13, 2018 at 05:09 PM

    Thanks, but this did not seem to work:


    1542146938Screen Shot 2018-11-13 at 3.08


  • Profile Image
    Jim_R
    Answered on November 13, 2018 at 07:14 PM

    How about you try the following codes? I made some minor modifications to the codes provided by my colleague:

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

        li#id_43 {

            width : 100px;

        }

        li#id_41 {

            width : 112px;

            margin-left : -24px;

        }

        li#id_55 {

            width : 140px;

            margin-left : -30px;

        }

    }

    Due to the constricted viewport area, I had to change some of the width values and added some margin adjustments. If these codes still won't work, I recommend you test your form with an actual mobile phone, see how it turned out, and if it's still not rendering in three columns, kindly get back to us with the make and model of the phone you used for the test, along with the browser.