Google Adsense Responsive Layout - How to hide sidebar ad on mobile

In a mobile first world, it is becoming very important to create responsive websites that work seamlessly on multitude of screen sizes for desktop, mobiles, and tablets. To address this problem from ads perspective, google adsense has been supporting responsive ads for sometime now. But it is not a magical solution and much work needs to be done to ensure optimum utilization of ads across different screen sizes.

One of the most common ad layout on bigger screen sizes involes either left or right sidebar containing the ad (For example, typical desktop layouts on web are either 2 columns or 3 columns).

Once the screen size shrinks (say on mobile), we have to move to single column layout. There are 2 main ways to handle sidebar ad in this scenario.

1. Hide sidebar adsense ad on mobile in a responsive design

One of the most common pattern is to hide sidebar ad for smaller screen size containing single column layout. We can use following css code to hide the ad in a responsive way.

html: add class ad_sidebar to your adsense ad

   <ins class="adsbygoogle ad_sidebar"
        data-ad-client=..
        data-ad-slot=...
        data-ad-format="auto">
    </ins>

css: hide ad if screen width is less than 768px

   .ad_sidebar { display:block; }
   @media(max-width: 768px) { .ad_sidebar { display: none; } }
     

2. Let the sidebar ad move either before or after main content using responsive adsense adunit

If you are using a responsive ad unit in your sidebar, you can plan your sidebar div in a manner that it moves either before or after the main content (one way to do so is by using bootstrap). Once you ensure that, typically you don't have to do anything else as the adsense responsive ad unit will automatically render the right ad based on the available space. For example, a responsive ad unit may show 160x600 ad on the left sidebar, but shift to 300x100 ad when moved to single column layout.

Sometimes though you want extra control - for example, you may want to ensure that the responsive ad unit don't take a height bigger than 75px. You can use following css to code to make such adjustments:

css: cap ad size to max height of 90px when screen width is less than 768px

.ad_sidebar { display:block; }
@media(max-width: 768px) { .ad_sidebar { height: 90px; } }