How I Make Adsense Responsive Ad Code To Display 300x250 Banner On Mobile

<style>
.OBResponsiveTop { width: 300px; height: 250px; }
@media(min-width: 500px) { .OBResponsiveTop { width: 468px; height: 60px; } }
@media(min-width: 800px) { .OBResponsiveTop { width: 728px; height: 90px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<div style='display:block;text-align: center'>
<!-- OBResponsiveTop -->
<ins class="adsbygoogle OBResponsiveTop"
     style="display:inline-block"
     data-ad-client="ca-pub-XXXXXXX11XXX9"
     data-ad-slot="7XXXXX1"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>


The code above does these:

• For screen widths up to 500px: a 300x250 ad unit is displayed.
• For screen widths between 500px and 799px: a 468x60 ad unit is displayed.
• For screen widths of 800px and wider: a 728x90 ad unit is displayed.
• and the displayed ad unit displays at the center. 

To adapt this sample code for your own blog:


1. Create a responsive ad unit in your AdSense account, and note down the following information from your responsive ad code:

• Your publisher ID, for example, ca-pub-1234567891234567
• Your ad unit's ID (data-ad-slot), for example, 1234567890.

2. In the sample code:

• Replace all instances of OBResponsiveTop with a unique name, e.g. front_page_123, etc.
• Replace ca-pub-XXXXXXX11XXX9 with your own publisher ID.
• Replace 7XXXXX1 with your own ad unit's ID.

3. Copy and paste your modified ad code into your blog's HTML where you'd like the ads to appear.

Once you’ve placed your ad code, test your ads on different devices and screens to make sure that the responsive behavior is working correctly.

That's all.