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

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

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:

Please try and let us know how it worked.

Thank you!

Thanks, but this did not seem to work:

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.