Search code examples
cross-domaintumblrmedia-queriesresponsive-design

Respond.js on Subdomain using Tumblr


My website is responsive. The blog section uses a subdomain pointing to Tumblr, but the cross-domain version of Respond.js isn't working. I'm doing this:

<script src="http://www.stevechab.com/scripts/respond.min.js"></script>
<link href="http://www.stevechab.com/scripts/respond-proxy.html" id="respond-proxy" rel="respond-proxy">
<link href="http://www.stevechab.com/scripts/respond.proxy.gif" id="respond-redirect" rel="respond-redirect">
<script src="http://www.stevechab.com/scripts/respond.proxy.js"></script>

I assume the problem is that respond.proxy.gif and respond.proxy.js aren't on blog.stevechab.com ... but doesn't that defeat the purpose of having a cross-domain version of Respond.js? Is my assumption right, or am I missing something? Is there a work around for this?

Note: I tried http://www.tumblr.com/themes/upload_static_file ... no dice.


Solution

  • To quote the respond.js readme:

    Respond.js works by requesting a pristine copy of your CSS via AJAX, so if you host your stylesheets on a CDN (or a subdomain), you'll need to upload a proxy page to enable cross-domain communication.

    – my emphasis. The cross-domain version is meant to enable you to process stylesheets loaded from another domain than the one respond.js is working on. In the case of Tumblr, however, you have a third domain added to the mix: static.tumblr.com, where your proxy script and gif have landed. That cannot, and will not, work.