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:


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


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


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

Ben Powell

Ben Powell was born in Wales and after living in several European countries is now resident in Germany. He is a frequent blogger, software developer and a social techie.

You may also like...

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

%d bloggers like this: