How to Use Google’s Adsense Code for Responsive Design?

In days of responsive design, two resources are out there which need special attention. One is images and another is any Ad code you or client may be using on Website or Blog. This is because they can be difficult to customize. This article is about customizing AdSense code to suit your responsive design.

Google’s AdSense has taken a step in right direction for Responsive Web Design. AdSense provide code which Website owner can use on their ‘Responsive Designed’ website and AdSense try to provide matching Ad for that screen width supported by Media Query.

Example Adsense Code:

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

First 3 lines of CSS code are same for every AdSense provided code.

So, how that AdSense code fits with different Ad Types?

Website owner can change those CSS code. We can change width value there. Width value should match with the Ad formats supported by AdSense.

.ws-sidebar-responsive { width: 300px; height: 250px; }
.ws-sidebar-responsive { width: 250px; height: 250px; }
.ws-sidebar-responsive { width: 200px; height: 200px; }

The above code is what I got after conversion. I need to use the code for 300*250 Ad type in sidebar. When the page will be viewed on smaller screen then smaller size Ad will be produced. I do not need that Ad below 200*200 px as sidebar wont be there for mobiles and smaller tablets.

Here is an snapshot of the page which shows Ads below Post Title taken from this post:
SC20131004-182137

The same code is working on mobile device and on larger screen of Desktop or Laptop. Enjoy Responsive Designing.

Remember: You need to create a new Ad unit for this. Older Ad cannot be converted to Responsive AdSense Code. Just select Responsive Ad Code from Ad Size dropdown.

ad-size

  • # 1 - by apie.biz

    Hi there,
    Nice article 😉
    I have installed responsive adsense ads and thought maybe it would be useful for someone to see real-world example of this: http://newzealandfirms.com/

Comments are open for an year period. Please, write here on Facebook page.