The adsense help page sort of hints that this can be done to make it properly responsive with media queries. Has anyone found an acceptable way of doing that or is it just not possible?
I can't see a way to do it.
Media queries can't be used to include or remove templates, only affect the styling of existing elements on the page.
So you can apply different styling like so:
HTML:
<style type="text/css">
.CtaDbAd {
float: right;
}
<xen:if is="@enableResponsive">
@media (max-width:910px) {
.CtaDbAd {
float: none;
text-align: center;
margin: 8px 0;
}
}
</xen:if>
</style>
<xen:if is="!{$visitor.user_id}">
<xen:if is="@enableResponsive">
<div class="CtaDbAd">
<script type="text/javascript">
google_ad_client = "ca-pub-id";
width = document.documentElement.clientWidth;
/* Overtaking Top Responsive */
google_ad_slot = "1234567890";
google_ad_width = 320;
google_ad_height = 50;
if (width > 483) {
/* Overtaking Top */
google_ad_slot = "1234567891";
google_ad_width = 468;
google_ad_height = 60;
}
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<xen:else />
<div class="CtaDbAd">
<script type="text/javascript">
google_ad_client = "ca-pub-id";
/* Overtaking Top */
google_ad_slot = "1234567891";
google_ad_width = 468;
google_ad_height = 60;
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
</xen:if>
</xen:if>
What that does is display the ad floated right for the fixed style and also the responsive style at widths of 910px and above.
Below that the ad is not floated and is center aligned, which as achieved using the CSS at the top and the .CtaDbAd class.
You can of course use display:none to show or hide ads using the same method but that is against the ToS of Google AdSense and probably most (all?) other ad serving companies.
Unfortunately what you can't do is this:
HTML:
<xen:if is="@enableResponsive">
@media (max-width:320px) {
<xen:include template="ad_1" />
}
<xen:else />
@media (max-width:480px) {
<xen:include template="ad_2" />
}
<xen:else />
@media (max-width:800px) {
<xen:include template="ad_3" />
}
<xen:else />
<xen:include template="ad_4" />
</xen:if>
Which would dynamically include or remove templates as the browser width changes.
So at this moment in time, the only method is to use the JavaScript provided by Google, which means the adverts don't dynamically change as the browser width changes.
I can't imagine this will be a major problem though as rarely do people change their browser width when browsing and even if they do, the next page they click on, the correct size ads will be shown.