grid cell responsive resize .css question

Hi all,

http://vidjay.net is a mp3 music download website made with vaadin, on the first page right side is a grid titled "TOP 20". 

In the valo derived theme this grid is styled for under 1000 pixels,  .v-ui[width-range~="0-1000px"]  ... like this

.v-grid td {
  font-size: 40px !important;
  line-height: normal !important;
  text-align: left !important;
}

and for > 1001 pixels .v-ui[width-range~="1001px-"] ... like this

.v-grid td {
  font-size: 20px !important;
  line-height: normal !important;
  text-align: left !important;
}

now, when loading the site in a desktop browser window over 1000px width, and then resize the window with the mouse to under 1001 px width, the fontsize is changed to 40px as expected, but the grid cell height does not adapt, and it looks muddled.

Only when reloading the site in the smaller window, then the cell height does adapt. Also, when you load the site, for exampe, in a  mobile phone, the grid is shown with the right cell size and font size immediatly.

But dynamic resizing doesnt seem to work somehow.

what am I doing wrong here? Or is it a bug?

thanks for looking into that, Thomas