How to display the Configurable List widget properly in mobile devices?

  • Profile Image
    Asked on March 18, 2017 at 12:30 PM


    I've added Configurable widget, it's not showin well on mobile screens, just followed


    but no use. Can you please suggest a appropriate code for the widget. You will see in my form, I've used widget multiple times; so I need that fixed :)


    Looking for help.

    Many thanks


  • Profile Image
    Answered on March 19, 2017 at 12:00 AM

    To display the widget properly in mobile devices, it's needed to inject some CSS code that will modify the widget's layout while viewing it on a mobile device. 

    The code explained below will need to be added between this mobile responsive code: 

    @media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){

    /* All given code here*/


    Now, this part of the code is fixed: 

    th {

                display: none;



            tr {

                display: block;


    The next part of the code is to display each column title, you will need to add or delete classes based on the number of columns your widget has:  

    .col1:before, .col2:before, .col3:before, .col4:before,.col5:before {


                font-weight: bold;


                display: block;



    If your widget would have 6 columns then you will need to simply add ".col5:before" to the code. 

    The next code is to show the column title again, it will change based on the number of columns you have too, example: 

    td.col1:before {

                content:"Pre-condition selection 1";


    If you would have 6 columns then you will need to add until "td.col6:before" to set the proper title. 

    Now, with the next code you will display the fields one right below each other: 

    td {

                display: block;

                position: relative;

                top: 3px !important;

                margin-left: 0px;


    You could also customize the given code to display the widget as desired. Also, all the code needs to be injected in the Inject CSS tab of the widget settings: 

    Hope this helps.