How to Make Google AdSense Ad Units Responsive

How to Make Google AdSense Ad Units Responsive

responsive ad unit

New trend in blogging platform is responsive style. Now most of the blogger diverting on responsive template. But actually what is responsive? I can explain you simply that responsive is a style which can be adjust within any resolution of device. Such as Desktop, laptop,  Smart phone, palmtop, smart tab related device. more clearly, Responsive web design allows you to vigorously control the display of your blog or website according to the screen/device. That means a blogger template can be seen easily in any device. So apart from this you have to think about your other things that should be responsive otherwise your template can't be properly display in all device. Advertise is a biggest thing which we must make responsive to make our blog pure responsive.

Early in August 2013 Google AdSense officially introduced ad support with Responsive Style. By using a responsive ad unit, you can control the size of the ads on your any section. But this is still in the Beta version of the stage but it need to develop more. Because AdSense ads are doesn't match the size with the pixels. Responsive AdSense does not flow and roll up like a Responsive apparently on images and video.

Google ads

For example we want to display the ads whose max-width: 350px that means we have to determine who is advertising supported and in accordance with this resolution, Suppose we have added 728px X 90px Ad unit and when we will watch in smart tab then it will turn into 468px X 60px ad unit.

Now I am providing an example below by a standard source code of AdSense (320px X 50px) in responsive mode-

.bs-responsive { width: 320px; height: 50px; }
@media(min-width: 500px) { .bs-responsive { width: 468px; height: 60px; } }
@media(min-width: 800px) { .bs-responsive { width: 728px; height: 90px; } }
<script async src=""></script>
<ins class="adsbygoogle bsm-responsive"
(adsbygoogle = window.adsbygoogle || []).push({});

How to modify it to display Adsense Responsive?

So now I will explain how to modify all of  AdSense ad units in responsive way. To make responsive we have to modify the CSS and have to select which ads we want to displayed according to their size in media queries-

@media(min-width: 240px) { .bs-responsive { width: 234px; height: 60px; } }
@media(min-width: 320px) { .bs-responsive { width: 250px; height: 250px; } }
@media(min-width: 480px) { .bs-responsive { width: 468px; height: 60px; } }
@media(min-width: 768px) { .bs-responsive { width: 728px; height: 90px; } }
@media(min-width: 1024px) { .bs-responsive { width: 468px; height: 60px; } }
@media(min-width: 1216px) { .bs-responsive { width: 728px; height: 90px; } }
<div style="text-align:center">
<script async src=""></script>
<ins class="adsbygoogle oom-responsive"
(adsbygoogle = window.adsbygoogle || []).push({});

In the above code you would find first part is CSS which is under <style>.......</style> and <div...........</div> is the main ads code which will provide by Google AdSense.

How to Make Google AdSense Ad Units Responsive with JavaScript?

I am also providing a trick that you can make your AdSense responsive with Java Script. This trick is pretty cool that will work automatically in all of your AdSense ad units.

<div id="adsbygoogle">
 <script type="text/javascript">

                adUnit   = document.getElementById("adsbygoogle");
                adWidth  = adUnit.offsetWidth;
                google_ad_client = "ca-pub-number";

                if ( adWidth >= 770 ) {
                  /* Leaderboard 728x90 */
                  google_ad_slot               = "Ad Slot number";
                  google_ad_width          = 770;
                  google_ad_height         = 90;
                } else if ( adWidth >= 468 ) {
                  /* Banner (468 x 60) */
                  google_ad_slot               = "Ad Slot number";
                  google_ad_width          = 468;
                  google_ad_height         = 60;
                } else if ( adWidth >= 336 ) {
                  /* Large Rectangle (336 x 280) */
                  google_ad_slot               = "Ad Slot number";
                  google_ad_width          = 336;
                  google_ad_height         = 280;
                } else if ( adWidth >= 300 ) {
                  /* Medium Rectangle (300 x 250) */
                  google_ad_slot               = "Ad Slot number";
                  google_ad_width          = 300;
                  google_ad_height         = 250;
                } else if ( adWidth >= 250 ) {
                  /* Square (250 x 250) */
                  google_ad_slot               = "Ad Slot number";
                  google_ad_width          = 250;
                  google_ad_height         = 250;
                } else {
                  /* Ad Link Unit (200 x 90) */
                  google_ad_slot               = "Ad Slot number";
                  google_ad_width          = 200;
                  google_ad_height         = 90;

 <script type="text/javascript"  


  • Replace ca-pub-number with AdSense cab publication number.
  • Replace Ad Slot number with AdSense ad slot number.

So I hope this tutorial help your to make your AdSense pure responsive until releasing of full version of Google. If you have any suggestion please share with us.  
How to Make Google AdSense Ad Units Responsive
4 Stars stars - "How to Make Google AdSense Ad Units Responsive" New trend in blogging platform is responsive style. Now most of the blogger diverting on respo...

Post a Comment

Really Useful Tutorial , Thank You Very Much :)
Hoping to Get More tutorials From You :)

thanks for dropping your comment.

Nice Article Keep It Up Bro

I Have started new blog also visit my blog

hello bro if i place adsense ads in my blog google will delete my blog?????????

Hi Furqan you got a nice blog name..I suggestion is to register it as soon as possible with .com suffix. Wish you success in your blogging career.

Brother Nauman obviously your Google AdSense account will be disable and reject your AdSense application. Because you are providing download link which is unauthorized and you are completely violating copyright of others.

I suggest create your site about Game review but not copy and paste from other site. And carefully read my following article about blogging niche...

if you want o earn money from your blog then you must be genuine blogger. I have seen you are using bidviser but to make $100 by bidviser it requires almost 5 years.

No bro my adsense application has been approved so dhould i place or not

Brother Nauman..Please go through AdSense terms and condition site and read carefully Point number 7. Those information has provided by AdSense team.

There are many site got approval but they make review after short period of time. So don't think that your AdSense approved account will be last long.

Beside of this there are many AdSense account that disable before making payment only for violating terms and conditions.

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form


Email *

Message *