Responsive CSS design, Adsense ads in display:none

Question

I wish not to show the right sidebar (which contains ads) when the max-device-width is 480px. If I use display:none; it violates the Adsense ToS. So, what's the good solution?

Answer 1

Google has recently introduced a new Responsive advertisement format which explicitly allows hiding advertisements (for responsive ads only).

Here are some techniques you’ll want to avoid:

• Hiding ad units at anytime (e.g., display:none), unless you're implementing a responsive ad unit

An code example even shows how to do this can be found in the Google Adsense manuals.

<style type="text/css">
.adslot_1 { width: 320px; height: 50px; }
@media (max-width: 400px) { .adslot_1 { display: none; } }
@media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }
@media (min-width:800px) { .adslot_1 { width: px; height: 90px; } }
</style>
<ins class="adsbygoogle adslot_1"
   style="display:inline-block;"
   data-ad-client="ca-pub-1234"
   data-ad-slot="5678"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

Note that there is a bug in this Google code sample though. You have to move the style="display:inline-block;" part to the section. Otherwise the inline display style overrules the section display none.

Answer 2

You can effectively do this using the DFP API using sizeMapping, which also allows you to serve different sizes of creative depending on the viewport size.

I answered a similar question here, but essentially if for a given resolution you target a size of creative that doesn't exist, no ad will be served as DFP won't be able to supply an ad.

If you just want to have no ads when the viewport is smaller than a given width, you'd want something like this:

googletag.cmd.push(function() {
    var mapLrgLeaderboard = googletag.sizeMapping().
        addSize([480, 320 ], [300, 250]). // when screen >= 480 x 320px use 300 x 250px 
        addSize([0, 0], [88, 88]). // 88 x 88px = non-existant ad size
        build();

    googletag.defineSlot('/12345678/Test-Large-Leaderboard', [[300, 250]], 'div-gpt-ad-123412341234-0').
        defineSizeMapping(mapLrgLeaderboard).
        addService(googletag.pubads());

    googletag.enableServices();
});

I wrote a short post about this (there are a couple of gotchas you might run into if you go by the Google description alone), although this (above) is the crux of it.

Hope this helps!

Toby