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?

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?

• javascript
• jquery
• mobile
• responsive-design
• adsense

7 Answers 7

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>');
}

Google have now introduced responsive ad units. You'll need to generate new ad code to use them.

I think this is not required in 2019 because there are too many new ads formats introduced officially by Google Adsense which fit every screen size (responsively).

But, you may use some Javascript codes to determine ads position or when to show or hide them while user browsing from different screen sizes.

There is a disclaimer at the top of this tool to ensure that Google are happy with you using it, but this will do exactly what you're after.

http://www.responsiveads.com/responsive-adsense/

From their blog

Google will most likely come up with their own solution for this sometime in the near future but in the mean time publishers can use our solution to enable AdSense to work to monetize their websites across all screens!

This is a big problem with AdSense. According to the terms of service, you are not allowed to programmatically refresh the ads, meaning you cannot load a different ad if your layout requires it after resize.

That being said, Google DFP (which supports loading AdSense ads) does have a refresh method. I've read through all the policies, and it seems that you can use this method for your own ads, but not when using AdSense.

Edit: Just had a phone call with Google the other day... they confirmed that using the refresh feature of DFP while serving AdSense violates their policies for AdSense. The refresh feature is only to be used with your own ads, or you risk losing your account and funds that you have earned.

I have done this in with simple css.

If its not a flash object you can get it to resize.

If its a iframe, make its width 100%

Depending on the ad loaded it could cut off some of the image, if thats the case then you will need some javascript that can measure the animations and reload a add accordingly.

<style>
iframe{width:100%}
</style>

and solves everything, I had this problem with a bootstrap website and adsense