Resizing the checkout table for mobile - by RasterEyes

The table showing items in cart in the checkout portion of the theme do not scale at mobile size.

Here is an image illustrating this problem:

I found a very simple alteration in the code that would fix this problem.

Here is a screen shot of the alteration using developer tools:
<img src=”http://everybodycolors.com/images/resizedTableExample.png
” alt=”Resized Table Example” />

All I did was change that one element of that specific css selector from “nowrap” to “wrap” and it makes the table completely responsive, even at mobile screen sizes.

I tried adding this code to my custom css:

@media only screen (max-width: 767px){
.table-responsive>.table>thead>tr>th,.table-responsive>.table>tbody>tr>th,.table-responsive>.table>tfoot>tr>th,.table-responsive>.table>thead>tr>td,.table-responsive>.table>tbody>tr>td,.table-responsive>.table>tfoot>tr>td { 
	white-space: wrap !important;
}}

But it doesn’t seem to solve the problem or do what I would expect it to do. Any idea why? Thanks!