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:




Published by

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.

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