Responsive CSS design, Adsense ads in display:none

adsense, css, responsive-design

Solution

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.

Problem

Original source