Responsive layout is now a design standard across websites. It lets you display your website with the same look and feel on different screens like monitor, tablet, mobile etc. Even Google now recommends using responsive layout instead of creating separate pages for mobiles.

With responsive design, all components in the web page HTML adjusts dynamically and even position themselves depending on the screen size. But what about ads? Google's Adsense ads are not dynamic. They have fixed width/height and if the screen size is smaller, the ads just overflow the screen causing a part of the ad to be hidden.

Make Google Adsense Ads Responsive.

As mentioned before, an Adsense ad unit can only have fixed dimensions by default. But luckily, Adsense provides a variety of ad sizes. So the trick is to show an ad of appropriate size depending on the screen size.

For example, open this demo page in your PC browser and you would see a 728x90 large leatherboard Adsense unit. Now try resizing the browser by reducing it's width to be lesser than the ad unit and refresh the page. You will find a 468x60 or smaller ad appearing which will stay fully within the screen size.

Responsive Adsense Ad JavaScript Trick.

What you need to do is to replace the original Adsense code in your website with this JavaScript code. Don't worry, we are not violating any of Google's Terms and this method is approved by the Adsense team.

<div style="width:100%;">
    <script type="text/javascript">
    
        // REPLACE THIS WITH YOUR ADSENSE PUBLISHER ID.
        google_ad_client = "ca-pub-592601807724218";
    
        // AD UNITS YOU WANT TO DISPLAY FOR THIS POSITION.
        var adsarr=[
            // The format is [width, height, "ad slot number"]
            [728, 90, "XXX"],
            [468, 60, "YYY"],
            [234, 60, "ZZZ"]
        ];
        
        // DO NOT MODIFY ANYTHING BELOW. 
        // This shows the adsense ad depending on your screen size.
        var scripts = document.getElementsByTagName( 'script' );
        var adblock = scripts[ scripts.length - 1 ].parentNode;
        var width=adblock.offsetWidth;                
    
        var got_adunit=0;
        for (var i = 0; i < adsarr.length; i++) {
            adunitarr=adsarr[i];
            if(width >= adunitarr[0]) {
                google_ad_width = adunitarr[0];
                google_ad_height = adunitarr[1];
                google_ad_slot = adunitarr[2];
                got_adunit=1;
                break;
            }
        }
        if (got_adunit == 0) {
            google_ad_slot="0";
            adblock.style.display="none";
        }
    </script>
    <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</div>

In the code, you need to replace two things.

1. google_ad_client value should be replaced with your Adsense publisher ID.
2. For the array with items like [970, 90, "YYY"], replace them with values for the ads you want to show. The format is [width, height, "ad slot number"]. You can get these values from the Adsense code for the ad unit you want to add.

What we are doing is to specify a set of Adsense ad units for different sizes as an array and the code will automatically display the best fitting ad. You could add,remove or change any ad in the array, but make sure the width, height and slot number are exactly the same as in the corresponding Adsense ad code.

For example, if you want to add a responsive ad in your header, you could have the array with leatherboard ads like "728x90", "468x60" and "234x60". And for your sidebar, the ads could be "300x250", "250x250" and "200x200". Depending on display area width, the best fitting ad would be shown.

The same code can be used in multiple places to show more than one ads in a page as well.

Why This Responsive Adsense Ad Does Not Violate Adsense Policies?

Google mandates the following in their Adsense publisher policy.

Once you've generated your code, we ask that you do not alter any portion of the code or change the layout, behavior, targeting, or delivery of ads for any reason, unless specifically authorized to do so by Google.

Our JavaScript trick does not actually modify the Adsense code at all. All we are doing is to detect the display area size and use the exact Adsense code for the ad unit that would fit the area. Hence it does not violate any adsense policy.

Note: Thanks to +Amit Agarwal for the original concept.

Also Read: Why you should use the new 300x600 adsense unit.