<img loading="lazy" src="https://cdn.kahimyang.com/resources/responsive_1.webp" 
 alt="Responsive adsense ad units" style="margin:15px;border:0px;width:500px;" />


As an added bonus, with the new asynchronous Javascript code, ads blocking page load are eliminated, making your page load even faster.



Below is the code similar to what is generated from the window above. This code is to be inserted where you want the ad to appear.


<pre class="brush:xml">
&lt;script async 
src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
&lt;/script>
&lt;!-- unit-name_1 -->
&lt;ins class="adsbygoogle"
 style="display:inline-block;width:728px;height:90px"
 data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
 data-ad-slot="8641943843">&lt;/ins>
&lt;script>
 (adsbygoogle = window.adsbygoogle || []).push({});
&lt;/script>
</pre>



For existing ad unit, generate the asynchronous code by getting into the same window as above from the ad unit's "Get code" selection. 



<img loading="lazy" src="https://cdn.kahimyang.com/resources/responsive_2.webp" alt="Responsive adsense ad units figure 2" 
 style="margin:15px;border:0px;width:400px;" />



Insert into the ad code generated a CSS style class to query the screen size and the corresponding height and width of the ad unit of each target 

screen resolution. The snippet below will dynamically serve the ad corresponding to the screen resolutions. See highlighted area.



<pre class="brush:xml;highlight:[2,3,4,5,6,8]">
&lt;div>
 &lt;style>
 .responsive-mobile-1 {width:320px; height: 50px;}
 @media (min-width:500px) { .responsive-mobile-1 {width:468px;height: 60px;}}
 @media (min-width:800px) { .responsive-mobile-1 {width:728px;height: 90px;}}
 &lt;/style>
 &lt;script async="true" 
 src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
 &lt;/script>
 &lt;!-- unit-name_1 -->
 &lt;ins class="adsbygoogle responsive-mobile-1"
 style="display: inline-block;"
 data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
 data-ad-slot="4819157688">&lt;/ins>
 &lt;script>
 (adsbygoogle = window.adsbygoogle || []).push({});
 &lt;/script>
&lt;/div>
</pre>



In creating your style, make sure that the specified width and height match one of the supported adsense ad unit sizes. In our example here, we used 

the different size variants of the leaderboard at different screen resolutions.



If you have multiple ad units in a page you may want to load the script in line 8 above only once. Here is a sample page layout.



<pre class="brush:xml">

&lt;html>
&lt;head>
 &lt;style>
 .responsive-mobile-1 {width:320px; height: 50px;}
 @media (min-width:800px) { .responsive-mobile-1 {width:728px;height: 90px;}}
 @media (min-width:500px) { .responsive-mobile-1 {width:468px;height: 60px;}}
 &lt;/style>
&lt;/head>


&lt;body>

&lt;!-- you page content -->

&lt;div>
 &lt;!-- unit-name_1 -->
 &lt;ins class="adsbygoogle responsive-mobile-1"
 style="display: inline-block;"
 data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
 data-ad-slot="4819157688">&lt;/ins>
 &lt;script>
 (adsbygoogle = window.adsbygoogle || []).push({});
 &lt;/script>
&lt;/div>


&lt;!-- Other page content and other ad units -->


&lt;script async="async" 
 src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
&lt;/script>
&lt;/body>
&lt;/html>

</pre>



The following is a note taken directly from Google. As this feature is still in beta, here are a few pointers to keep in mind when setting your size:

<ul>
<li>
Be sure to specify fixed pixel values when setting the width and height of the ad to be served. Make sure that the specified width and height match 

one of our supported ad sizes.
</li>
<li>
The asynchronous ad code is responsive on initial page load only, subsequent changes to the ad size (e.g., after a screen orientation change) will not 

cause a new ad to be displayed. This is something that we’ll look to address in the future.
</li>
<li>
Always set a default ad size in case media queries aren’t supported.
We currently don’t provide a breakdown by size for all of the ads served by a responsive ad unit. This is also something that we’ll look to address in 

the future.
</li>
</ul>





That's it. Good luck.

Serving responsive Adsense ad units