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)