Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
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