How to make configurable list mobile responsive when viewed in portrait mode?

  • Profile Image
    ama411
    Asked on December 05, 2017 at 03:01 PM

    I want to Scale my Configurable List Widget for mobile phones so it works in Portrait mode correctly.   


    Not sure on the CSS commands 

  • Profile Image
    Nik_C
    Answered on December 05, 2017 at 04:16 PM

    Please check my clone of your form: https://form.jotform.com/73385766751974

    It should look like this:

    1512508433Screen Shot 2017-12-05 at 10.1

    And if that works for you, just copy and paste the below code to your Custom CSS of each widget:

    1512508547Screen Shot 2017-12-05 at 10.2

    @media only screen 

    and (max-device-width : 667px) {

    td {


    display: block !important;


    }

    th.col1 {

        display: none;

    }

    td.col1:before {

    content: "Name";

    display: block;

    }

    td.col2:before {

    content: "Class";

    display: block;

    }

    td.col3:before {

    content: "Youth Rider Color";

    display: block;

    }

    td.col4:before {

    content: "Youth Rider Size";

    display: block;

    }

    th.col2 {

        display: none;

    }

    th.col3 {

        display: none;

    }

    th.col4 {

        display: none;

    }

    }

    Let us know how it worked.

    Thank you!


  • Profile Image
    ama411
    Answered on December 05, 2017 at 04:49 PM

    Thank you seems to be working .