Boost Adsense Earnings by Responsive Ad Size

Adsense ad sizes, place ads size accordingly to screen size and boost your Adsense earnings.

Boost Adsense Earning by placing the correct ad size ad on your webpage.

Responsive Ad Unit
Adsense Responsive Ads Units

Responsive ad size: Responsive ad size means that ad according to the size of user’s display. If you place-responsive ad size then it will more user friendly as well as boost your earning.

Higher CPC: Cost Per Click mean earning of per click. If you get high CPC then your overall earning will be higher. Responsive ads size will get higher CPC then ‘auto’ ad sizes.

Best Performing Ad sizes

For Mobile

WidthHeightCan placed at
300px250pxAbove the fold
336px280pxIn Post/Article
320px100pxabove fold
320px50above fold

For Desktop/bigger screen

WidthHeightCan Place at
728px90pxIn Article
970px90pxbottom or front display
468px60pxBelow Menu
300px600pxSidebar

How to Make an Ad Size Responsive?

Now you’ve almost an idea that what size of ad to be placed and where to place. But the question here is. How to make an ad responsive for all screen?

Solution is here

<style>
/* for Mobile Screen ad size below */
.Techaak_responsive_1 { width: 320px; height: 100px; }
/* For Tabs Scren ad size below */
@media(min-width: 500px) { .Techaak_responsive_1 { width: 468px; height: 60px; } }
/* For Desktop/Laptop Screen ad size below */
@media(min-width: 750px) { .Techaak_responsive_1 { width: 728px; height: 90px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Techaak_responsive_1 -->
<ins class="adsbygoogle Techaak_responsive_1"
     style="display:inline-block"
     data-ad-client="ca-pub-4XXXXXX11XXX9"
     data-ad-slot="8XXXXX1"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Place above ad code by editing ‘red-coloured text’ by your values. and these changes are as

If your pages have more than 1 ad unit then, in place of 1st ad it will be Techaak_responsive_1 and for 2nd it will be Techaak_responsive_2 and similarly for 3rd Techaak_responsive_3.

Please make sure that you place all data-ad-slot with the different ad unit. So that you can check report for all unit placed.

For Blogger(Advanced User)

Log in to blogger, click on a theme, and ‘edit HTML’ now find <style> and place your style code before </style>


.Techaak_responsive_1 { width: 320px; height: 100px; }
@media(min-width: 500px) { .Techaak_responsive_1 { width: 468px; height: 60px; } }
@media(min-width: 750px) { .Techaak_responsive_1 { width: 728px; height: 90px; } }


.Techaak_responsive_2 { width: 320px; height: 100px; }
@media(min-width: 500px) { .Techaak_responsive_2 { width: 468px; height: 60px; } }
@media(min-width: 750px) { .Techaak_responsive_2 { width: 728px; height: 90px; } }

WordPress(Advance User)

WP user can edit there stylesheet by Clicking on appearance and then Editor. Now agree/understand the warning,(your own risk if you edited in the wrong way.). Placed your style code at the end of stylesheet. code will be like this.


.Techaak_responsive_1 { width: 320px; height: 100px; }
@media(min-width: 500px) { .Techaak_responsive_1 { width: 468px; height: 60px; } }
@media(min-width: 750px) { .Techaak_responsive_1 { width: 728px; height: 90px; } }


.Techaak_responsive_2 { width: 320px; height: 100px; }
@media(min-width: 500px) { .Techaak_responsive_2 { width: 468px; height: 60px; } }
@media(min-width: 750px) { .Techaak_responsive_2 { width: 728px; height: 90px; } }

Tell us, how this article helps you. Or if you face any error while placing ad please tell us.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.