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

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

Not sure on the CSS commands 

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

It should look like this:

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

@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!

Thank you seems to be working .