Switching Google AdSense Between Desktop and Mobile

When you look up AdSense placement patterns, a common recommendation is to show two large rectangles side by side under the article on desktop, and one responsive ad on mobile so that you do not violate the rules. However, when I read the AdSense policy on ad code modifications, it seemed questionable to simply hide a large rectangle ad with CSS.

Prohibited modifications to the code

You may not modify AdSense code in the following ways.

Hiding an ad unit using display:none or similar techniques, except when implementing responsive ad units
...

So I tried a different approach: use responsive ads and display two of them in a layout equivalent to large rectangles.

Updating the HTML

First, update the HTML. On desktop, display two ads side by side in a table. On mobile, display only one ad as-is. Wrap the desktop section in a div with the class ad_desktop. Also add the ad_rectangle class to each desktop ad block. Wrap the mobile section in a div with the class ad_mobile.

Replace the ad IDs and related values as needed.

<!--- adsense for desktop -->
<div class="ad_desktop" align="center">
  <table style="border:none">
    <tr>
      <!--- left side ad -->
      <td style="border:none">
        <script
          async
          src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
        ></script>
        <!-- responsive-desktop1 -->
        <ins
          class="adsbygoogle ad_rectangle"
          style="display:block"
          data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
          data-ad-slot="XXXXXXXXXX"
          data-ad-format="auto"
        ></ins>
        <script>
          ;(adsbygoogle = window.adsbygoogle || []).push({})
        </script>
      </td>
      <!--- right side ad -->
      <td style="border:none">
        <script
          async
          src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
        ></script>
        <!-- responsive-desktop2 -->
        <ins
          class="adsbygoogle ad_rectangle"
          style="display:block"
          data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
          data-ad-slot="XXXXXXXXXX"
          data-ad-format="auto"
        ></ins>
        <script>
          ;(adsbygoogle = window.adsbygoogle || []).push({})
        </script>
      </td>
    </tr>
  </table>
</div>
<!--- adsense for mobile -->
<div class="ad_mobile">
  <script
    async
    src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
  ></script>
  <!-- responsive-mobile -->
  <ins
    class="adsbygoogle"
    style="display:block"
    data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
    data-ad-slot="XXXXXXXXXX"
    data-ad-format="auto"
  ></ins>
  <script>
    ;(adsbygoogle = window.adsbygoogle || []).push({})
  </script>
</div>

Updating the CSS

Next, add the following CSS. Under normal conditions, the ad_rectangle class is set to 336px x 280px, which matches the size of a large rectangle. Then, in the media queries, hide desktop ads with .ad_desktop { display: none !important; } when the width is 767px or less, and hide mobile ads with .ad_mobile { display: none !important; } when the width is 768px or greater.

.ad_rectangle {
  width: 336px;
  height: 280px;
}

@media only screen and (max-width: 767px) {
  .ad_desktop {
    display: none !important;
  }
}

@media only screen and (min-width: 768px) {
  .ad_mobile {
    display: none !important;
  }
}

If you reload the page while changing the browser width, you should see the AdSense block switch between the two layouts.

Prohibited modifications to the code

Updating the HTML

Updating the CSS

References