Google Added New Ad Unit for Responsive Site – Why it is cool?

Few days ago Google launches new Google ad unit, now what? Well it’s not just an ordinary ad you’d already applied into your site like Rectangle, Square, Skyscraper and more, the new ad offers cool new feature were you can customize the ad size, yes you read it right, you can now customize the ad size depending on your need, they’re using new CSS3 selector which is @media query to customize your ad size, like 280px ad size for 320px screen size or 760px for tab orientation or something like that, this is really great and handy new feature but then again it still in beta so expect new feature and customization they can add and bring in the table 😉

Let’s take a look on the sample ad below.

Sample Ad

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

As you can see above they included internal style and added couple of @media styles.

Customization

Here comes the coolest things the customization, so what if I’d like to target small screen size display like iPhone?

It’s just like adding @media condition in responsive design, what you need is update @media min-width and of course the declaration property value, below is the sample code.

@media(min-width: 320px) { .sutanaryan-category-ads { width: 280px; height: 50px; } }

Want to create responsive site and the basic CSS responsive framework click here.

Hope that helps, happy customizing new ad 😉