This guide aims to help you make AdX ad tags responsive so that they work well with your responsive theme. As you’re probably already aware, AdX does not have responsive code by default, therefore AdX ads may look out of place on mobile devices depending on the ad type viewed.
In this example, a 728 x 90 AdX ad unit will be made to work with responsive themes.
IMPORTANT: Before you begin, you must convert your AdX ad tags to asynchronous ad tags.
Therefore, you should have something that looks like this so far :
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-0000000000000000"
data-ad-slot="0123456789"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Remove the following from your AdX code :
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
Replace it with the following :
<ins class="adsbygoogle responsive-dynamic"
style="display:inline-block;"
So you should have something like this in the end :
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle responsive-dynamic"
style="display:inline-block;"
data-ad-client="ca-pub-0000000000000000"
data-ad-slot="0123456789"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Next, you have to edit your CSS file and add the following :
.responsive-dynamic {
width: 300px;
height: 250px;
}
@media(min-width: 484px) {
.responsive-dynamic {
width: 728px;
height: 90px;
}
}
When a small screen device is used (eg. smartphone) to view the web page with the AdX ad, the ad will change from 728 x 90 px to 300 x 250 px ad. Ads that are 300 x 250 pixels fit perfectly in responsive website designs.
This tutorial can be adjusted for different ad sizes to work with your ad units that are not 729 x 90 pixels.