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.
To quote the
respond.js
readme:– 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.@Steve Chab,
There are two reasons respond.js & respond.proxy.js were not working for you.
You had the respond-proxy.html file in the origin domain, whereas the file should have been served from your sub-domain (blog.stevechab.com) or any other external domain.
There seems to be a bug with respond.js / respond.proxy.js when linking to a css file with a relative url. To fix it, use an absolute url. Your main site uses a relative url for the css stylesheet, and your blog an absolute url.
Please find below, the re-vised working markup to get respond.js & respond.proxy.js working on your website.