Configurable List: Changing width of number field

I'm trying to make this table as narrow as possible so it will display on a mobile device without scrolling horizontally

is it possible to make the number field narrower via CSS? 

Yes, you can achieve that by using a bit of custom CSS in your widget. I see that your current CSS is already forcing the second column (the one with the number field) to be at least 120 pixels, which means that no matter how small the Number field is - its column will always take at least 120 pixels.

In order to change that, I would recommend removing th.col2 from the following part of the code:

th.col2, th.col3 {
    min-width: 120px;
}

and adding max-width: 72px; into the following part:

.stepper-wrap input.stepper {
    width: 100%;
    max-width: 72px;
}

Your full custom CSS in the widget would end up being this:

.checkbox, .radio {
margin: 3px 0;
min-width: 70px;
}
.checkbox, .radio {
 display:inline;
}
.add{
 display:none;
}

span[title="Monday"]:before {
    content: "Mo";
    font-size: 11px;
}
span[title="Tuesday"]:before {
    content: "Tu";
    font-size: 11px;
}
span[title="Wednesday"]:before {
    content: "We";
    font-size: 11px;
}
span[title="Thursday"]:before {
    content: "Th";
    font-size: 11px;
}
span[title="Friday"]:before {
    content: "Fr";
    font-size: 11px;
}
span[title="Saturday"]:before {
    content: "Sa";
    font-size: 11px;
}
span[title="Sunday"]:before {
    content: "Su";
    font-size: 11px;
}
table#list th {
 border: 1px solid;
 padding: 3px!important;
}
table#list td {
 padding: 3px!important;
 border: 1px solid;
}
.col2 .stepper-btn-wrap {
display: none;
}

select.y {
display: none;
}
select.m {
width: 46px;
}

th[scope="col"] span {
    font-size: 0;
}
.ui-datepicker table {
    background: #EEE;
}
.ui-datepicker-inline {
    position: relative;
    z-index: 1;
}
#list tbody > tr:nth-child(2) td div.dateContainer .dateDrowdowns:before {
    content: "Mon ";
}
#list tbody > tr:nth-child(3) td div.dateContainer .dateDrowdowns:before  {
    content: "Tue ";
}
#list tbody > tr:nth-child(4) td div.dateContainer .dateDrowdowns:before  {
    content: "Wed ";
}
#list tbody > tr:nth-child(5) td div.dateContainer .dateDrowdowns:before  {
    content: "Thu ";
}
#list tbody > tr:nth-child(6) td div.dateContainer .dateDrowdowns:before  {
    content: "Fri ";
}
#list tbody > tr:nth-child(7) td div.dateContainer .dateDrowdowns:before  {
    content: "Sat ";
}
#list tbody > tr:nth-child(8) td div.dateContainer .dateDrowdowns:before  {
    content: "Sun ";
}
th.col3 {
    min-width: 120px;
}
.stepper-wrap input.stepper {
    width: 100%;
    max-width: 72px;
}

This is how the widget would end up looking:

Please try it out, and let us know if you need any further assistance.