Twitter Bootstrap responsive design features problem YUI Compressor

I recently had a problem with a website built on Twitter Bootstrap. I was using the .visible-desktop, .hidden-phone, etc responsive classes, and they just wouldn’t work. The .visible-desktop, would not appear on a desktop! When I used the uncompressed versions of the CSS files everything worked ok, and it was only when I compressed and minified them that the problems started.

The solution was relatively easy, once I’d figured out why. I was using YUI Compressor to minimize and combine the various CSS files into one.

The combining was not an issue, but the media queries were getting changed from:

Before

@media only screen and (-webkit-min-device-pixel-ratio: 1.5)

After

@media only screen and(-webkit-min-device-pixel-ratio: 1.5){}

Fix

@media (min-width: 768px) and /*!YUI-Compressor */ (max-width: 979px)

Warning

I love constructive and useful commentary. I hate spam. Before you consider leaving a spammy comment heed my warning. I will show no mercy.

Feel free to leave constructive comments that aren't spam!