4 {{ upvoteCount | shortNum }}
4 {{ upvoteCount | shortNum }}

adsense responsive ads coding

by johnwinch42
3 replies
Hello,

I have a 970x90 ads and I want it to resize to 336x280 when people view it on a low resolution, how cna I do that?

I tried the @media code explained on Google but it's not working. How can I modify my ads to make it resize?

Code:
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<style type="text/css">
.adslot_1 { display:inline-block; width: 336px; height: 280px; }
@media (min-width:800px) { .adslot_1 { width: 970px; height: 90px; } }
</style>
<ins class="adsbygoogle adslot_1"
     style="display:inline-block;"
     data-ad-client="ca-pub-00000000000"
     data-ad-slot="00000000000"
     data-ad-format="horizontal"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Best regards,
#ads #adsense #coding #responsive
  • Profile picture of the author webmacster
    Here's a working example that i used for years though i believe that today AdSense already has a responsive profile:

    Code:
    <div id="google-ads" style="text-align:center;">
<script type="text/javascript">
 
	adUnit   = document.getElementById("google-ads");
	adWidth  = adUnit.offsetWidth;
 
	/* Replace this with your AdSense Publisher ID */
	google_ad_client = "ca-pub-YOUR-ID";
 
	if ( adWidth >= 970 ) {
	  /* Leaderboard 970x90 */
	  google_ad_slot	= "6742685228";
	  google_ad_width	= 970;
	  google_ad_height 	= 90;
	} else if ( adWidth >= 768 ) {
	  /* Banner (768 x 90) */
	  google_ad_slot	= "4272979616";
	  google_ad_width 	= 768;
	  google_ad_height 	= 90;
	} else if ( adWidth >= 468 ) {
	  /* Banner (468 x 60) */
	  google_ad_slot	= "5050820255";
	  google_ad_width 	= 468;
	  google_ad_height 	= 60;
	} else if ( adWidth >= 336 ) {
	  /* Large Rectangle (336 x 280) */
	  google_ad_slot 	= "1435767413";
	  google_ad_width 	= 336;
	  google_ad_height 	= 280;
	} else if ( adWidth >= 300 ) {
	  /* Medium Rectangle (300 x 250) */
	  google_ad_slot 	= "1015933561";
	  google_ad_width 	= 300;
	  google_ad_height 	= 250;
	} else if ( adWidth >= 250 ) {
	  /* Square (250 x 250) */
	  google_ad_slot	= "0539742472";
	  google_ad_width 	= 250;
	  google_ad_height 	= 250;
	} else if ( adWidth >= 200 ) {
	  /* Ad Link Unit (200 x 200) */
	  google_ad_slot 	= "4896091861";
	  google_ad_width 	= 200;
	  google_ad_height 	= 200;
	} else {
	  /* Do not display the Google Ad */
	  google_ad_slot		= "0";
	  adUnit.style.display	= "none";
	}
 </script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
    hope it helps
    Signature
    Its A Game Changer And Now It's Time To Level The Playground!
    UBotter Labs Marketing Automation
    {{ DiscussionBoard.errors[9990258].message }}
  • Profile picture of the author zeyfah
    choose responsive ad size. it'll resize automatically. but you need to refresh the page in order to see that happening.
    Signature
    Building Your Online Brand - Blog Articles
    {{ DiscussionBoard.errors[9991604].message }}
  • Profile picture of the author webmacster
    there is no way of re-sizing the ads on the fly unless you are using java / jquery to reload the ads every-time a condition is met.
    Signature
    Its A Game Changer And Now It's Time To Level The Playground!
    UBotter Labs Marketing Automation
    {{ DiscussionBoard.errors[9991667].message }}

Trending Topics