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

Hi there,

I have two forms with configurable lists.  Both have the setting checked for Make Responsive. 

http://ccach.org/tutoring/
http://ccach.org/afroquiz/afroquiz-registration/

For both forms don't seem to work well on a phone vertical layout.  The configurable list doesn't fold under and goes off the right side of the screen and for some reason the full name, phone and email fields have very long text fields that go off the right hand side of the screen.

 

Can you provide some assistance on how I can get these forms to look nicer on a mobile device?

Thanks

Tanya

After checking the links you have provided I can see what you're referring to, but this does happen even when you're loading the direct link to your form. 

To display the widget in multiple lines then you will need to inject this code: 

  th {

        display: none;

    }

 

    tr {

        display: block;

    }

 

    .col1:before, .col2:before, .col3:before, .col4:before,.col5:before,.col6:before,.col7:before,.col8:before {

 

        font-weight: bold;

 

        display: block;

 

    }

 

    /* Naming the fields*/

 

    td.col1:before {

        content:"Student's Full Name";

    }

 

    td.col2:before {

        content:"Student's Age";

    }

 

    td.col3:before {

        content:"Student's Grade";

    }

 

    /* Positioning the fields in multiple columns*/

 

    td.col3 {

        display: block;

        position: relative;

        top: 3px !important;

        margin-left: 0px;

    }    

Since the widgets seem similar then the code should work for both, and to inject the code click on the widget and then on the wizard icon: 

Go to the Custom CSS tab and paste the given code there: 

Here's the link to my cloned form where I have applied the code: https://www.jotform.com/63337966791976 

If you have any question, please let us know.