How to make Adsense ads work with responsive website

Question

I looked around the current solutions, and this question has been partially covered in these two posts; Making Adsense Responsive and In javascript 'If mobile phone'

I have a site that is responsive and the only thing that breaks it on mobile phones is the horizontal Google Ad on my page, which makes it stick out at first with extra space since it's bigger than everything else.

I'm looking to see if anyone has a workable solution so I can basically switch between this big banner, and a smaller format for mobile browsers where the screen size is smaller and doesn't break my responsive site.

My current solution would be to pull in the screen size and show a smaller ad if it is below a certain threshold. Is there a better way?

Answer 1

You can use this code for AdSense, which is not against it TOS as it does not change the Ads "on the fly", you're just serving an Ad depending on the screen size but not changing the ad itself.

<script type="text/javascript">


    var width = window.innerWidth 
        || document.documentElement.clientWidth 
        || document.body.clientWidth;

    google_ad_client = "ca-publisher-id";

    if (width > 800) {
        // Activa el anuncio "Leaderboard" de 728x90 para pantallas anchas
        google_ad_slot = "ad-unit-1"; 
        google_ad_width = 728; 
        google_ad_height = 90;
    } else if ((width <= 800) && (width > 400)) { 
        // Activa el anuncio "Banner" de 468x60 para pantallas pequeñas (móviles) 
        google_ad_slot = "ad-unit-3"; 
        google_ad_width = 468; 
        google_ad_height = 60;
    } else { 
        // Activa el anuncio "Medium Rectangle" de 300x250 para medianas (tablets)
        google_ad_slot = "ad-unit-2"; 
        google_ad_width = 300; 
        google_ad_height = 250;
    }

</script>

<script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

And this one for DFP:

var width = window.innerWidth 
    || document.documentElement.clientWidth 
    || document.body.clientWidth;
if (width >= 800) {
    // Activa el anuncio "Leaderboard" de 728x90 para pantallas anchas
    document.write('<div id="div-gpt-ad-1234567891234-1" style="width:728px; height:90px;"">');
    googletag.cmd.push(function() { googletag.display('div-gpt-ad-1234567891234-1'); });
    document.write('</div>');

} else if ((width < 800) && (width > 400)) { 
    // Activa el anuncio "Medium Rectangle" de 300x250 para medianas (tablets) 
    document.write('<div id="div-gpt-ad-1234567891234-2" style="width:300px; height:250px;"">');
    googletag.cmd.push(function() { googletag.display('div-gpt-ad-1234567891234-2'); });
    document.write('</div>');

} else { 
    // Activa el anuncio "Banner" de 468x60 para pantallas pequeñas (móviles) 
    document.write('<div id="div-gpt-ad-1234567891234-3" style="width:468px; height:60px;"">');
    googletag.cmd.push(function() { googletag.display('div-gpt-ad-1234567891234-3'); });
    document.write('</div>');
}