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)

Leave a Reply

Please do not spam. Everything is moderated and I have no patience for the slightest bits of spam. You will get Askimet blacklisted. No links that are trying to sell things allowed. Blogspam countries are IP banned.

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>