Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Fake-out responsive Google Ads. Works by showing one and hiding another at a particular breakpoint without using `display: none` which breaks the ads.
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Large Banner -->
<ins class="adsbygoogle adblock_1 large"
style="display:block;width:728px;height:90px"
data-ad-client="ca-pub-0000000000000000"
data-ad-slot="0000000000"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Medium Rectangle -->
<ins class="adsbygoogle adblock_1 small"
style="display:block;width:300px;height:250px"
data-ad-client="ca-pub-0000000000000000"
data-ad-slot="0000000000"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
.adblock_1 {
overflow: hidden;
height: auto;
margin: 0 auto;
}
.adblock_1.large[style] {
height: 90px !important;
}
.adblock_1.small[style] {
height: 0px !important;
}
@media only screen and (max-width: 750px) {
/* swap the large and small at a certain breakpoint */
.adblock_1.large[style] { height: 0px !important; }
.adblock_1.small[style] { height: 250px !important; }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment