Adsense Responsive Ad Code Modification Using CSS Media Queries

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.

css 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:

.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; } }
<script async src="//"></script>
<!-- OBlog_responsive_728_AdUnit -->
<ins class="adsbygoogle oblog-responsive-728-adunit"
(adsbygoogle = window.adsbygoogle || []).push({});

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.


 ==> 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.


  1. Can this be implemented in wordpress too?

    1. Yes bro. I implemented it on mobilitaria blog

  2. Oga Jide since yesterday i created my ads unit nothing was displaying on my site why? I did follow your previous post accordingly.

    1. It won't show ads till you are fully approved.

  3. I come again sir where can i locate my own CSS Section of my blog am deeply confuse though am not fully approved as I later got notification from adsense at my Dashboard. I will appreciate if you direct me accordingly. Thanks.

    1. You can search my blog for how to use the new Blogger HTML editor


Post a Comment

We Love To Hear From You But Don't Spam Us With Links!

Want to be notified when I reply your comment? Tick the "Notify Me" box.

If your comment is unrelated to this post, please drop it at my Facebook group here.