Adsense Responsive Ad Code Modification Using CSS Media Queries

ALERT : Check the updated tutorial on responsive ad modification here.

When I published how to create and add responsive Adsense ad unit, I recommended the implementation of the "Smart sizing" mode which doesn’t require you to make any changes to your ad code. This mode lets Adsense to dynamically calculate the ad unit size that will adapt to your page layout based on the width of the ad unit’s parent container, then determine what's the best standard height to go with that width.


For example, if you have a <div> with a width of 30% and you place our ad code within the<div>, then depending on the width of the user's screen, Adsense will automatically serve different ad sizes. If your page is viewed on a tablet with a width of 1024px, we'll serve a 307x250 ad, and if it's view on a 21" desktop PC with a 1680px width, we'll serve a 504x60 ad.

If you would want to specify either an exact size via CSS or a general shape (horizontal, vertical, and/or rectangle) that your ad unit should conform to, you will have to select the "Advanced" mode instead of the "Smart Sizing" mode when you generate your responsive ad code. The Advanced mode lets you modify the ad code as desired using css media queries.

I implemented the responsive 728 x90 leatherboard ad banner under the navigation of this blog using the "Advanced" mode. I modified the ad code in a way that it will serve a 300 x 250 ad unit on screens whose width are less than 500px. If the width of the screen is greater than 500px but less than 800px, a 468 x 60 ad unit will be displayed and on screens whose width are greater than 800px, a 728 x 90 ad unit will be displayed.

To get this done on my blog, I generated the responsive ad code, ensuring I select the "Advanced" mode. Below is what the generated ad code looks like:


<style>
.oblog-responsive-728-adunit { width: 320px; height: 50px; }
@media(min-width: 500px) { .oblog-responsive-728-adunit { width: 468px; height: 60px; } }
@media(min-width: 800px) { .oblog-responsive-728-adunit { width: 728px; height: 90px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- OBlog_responsive_728_AdUnit -->
<ins class="adsbygoogle oblog-responsive-728-adunit"
     style="display:inline-block"
     data-ad-client="ca-pub-1234"
     data-ad-slot="5678"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

I deleted the style part of the code (in yellow) , then placed the other part of the adsense code on my blog using the HTML/Javascript gadget. Thereafter, I added the media queries below to the css section of my blog's html.


.oblog-responsive-728-adunit { width: 300px; height: 250px; }

@media(min-width: 800px) { .oblog-responsive-728-adunit { width: 728px; height: 90px; } }
@media(min-width: 500px) { .oblog-responsive-728-adunit { width: 468px; height: 60px; } }
@media screen and (max-width: 499px) { .oblog-responsive-728-adunit { width: 300px; height: 250px; } }

That's all.

The .oblog-responsive-728-adunit { width: 300px; height: 250px; } specifies the default size. This will ensure that an ad renders even when media queries aren’t supported especially when your blog is viewed by old browsers.

If you understand how to use css media queries, you can use styles different from mine.

You can use the responsive design testing sites to see what your responsive ad unit will look like on different devices and screens to make sure that the responsive behaviour is working fine.

To test with your desktop browser, you must resize your browser to a certain width before you access your web page for you to see the responsive ad that is served on screen with such width.

UPDATE:

 ==> If your ad name (eg oblog-responsive-728-adunit) is not added beside adsbygoogle as seen in the ad code above, add it yourself and ensure you use it for the styling too. 
==> Also ensure data-ad-format="auto" is deleted if present in your code.


NB: This css media queries will not work for you if your blog is not responsive. You can check if your blog is responsive here.

Further Reading : How To Modify Your Responsive Ad Code