How to create responsive Google ads

Responsive ad units allow you to support a wide range of devices by working with your responsive design web pages. If you don’t already have a responsive design site, see Web Fundamentals on the Google Developers site to get started. If you do, you can create a new responsive ad unit by following these steps:

  1. Generate the ad code.
    To generate the ad code for a responsive ad unit:
    i.  Create an ad unit in the usual way, making sure to select “Responsive” from the Ad size drop-down in the process, and click Save and get code.
    ii.  In the “Ad code” box that appears, select the following option from the Mode drop-down:
    iii.  Smart sizing (recommended) – this is the recommended mode and doesn’t require you to make any changes to your ad code, unless you want to specify the general shape (horizontal, vertical, and/or rectangle) that your ad unit should conform to.
    View an example of the smart sizing ad code:

    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <!-- responsive_homepage -->
    <ins class="adsbygoogle"
    style="display:block"
    data-ad-client="ca-pub-1234"
    data-ad-slot="5678"
    data-ad-format="auto"></ins>
    <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script>

    By default, our responsive ad code includes a data-ad-format tag with the value of “auto”. It’s this tag which enables the smart sizing behavior for the responsive ad unit.

  2. Place the ad code on your site.
    Copy and paste the ad code into the HTML source code of your page where you’d like the ad to appear, keeping in mind that it will dynamically inherit the size of the parent container.
    Once you’ve placed your ad code, we recommend that you test your ads on different devices and screens to make sure that the responsive behavior is working correctly.

Sources: https://support.google.com/adsense/answer/3543893