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
After
Fix
Hey Ben,
ReplyDeleteAh that is so annoying and big ups for taking the time to document it.
Best thing to do is submit an issue on github to the YUI team. They are very active and would be more then happy to fix this.
https://github.com/yui/yuicompressor/issues
Cheers,
Jake