Is there a way to resize google adsense in a responsive design?

6 comments

1. Ideally, CSS media queries could automatically scale the ads down, and, in a perfect world, the ads would automatically change their layout based on the new size. However, Google Ads do not support this, nor do they even allow this—you aren’t allowed to change the contents of the ad, nor hide any portion of it, except with explicit permission from Google, according to their Terms of Service (removed text marked with [...]):

   An alternative solution would be to serve up the ads via JavaScript on a conditional basis. For example, when the page loads, retrieve the size of the browser’s viewport and if the width of the viewport of the browser is smaller than the width of the preferred ad, serve up a smaller ad instead. It should work similar to CSS media queries, except do not serve up new ads when the user resizes their browser, as this would generate false impressions (multiple impressions on a single page, without refreshing), which is also against their Terms of Service:

   Log in to Reply

2. The existing answers are outdated. Google introduced Responsive Ads in July 2013:

   The new responsive ad units allow you to support a wide range of
   devices by working with your responsive design web pages. You can now
   dynamically specify the size of the ad that will be served, adapting
   it to fit the way your site renders a page on a particular device.

   Responsive ads work with fixed, fluid and responsive layouts. All you need to do is place the “Smart Sizing” version of code in the place where you want the ads to appear. The ad will stretch horizontally to occupy all available space and vertically to display the most optimal standard size ad. If your website changes its layout depending on device orientation then the ad will size automatically on device orientation change event. Advance customization is possible using CSS and HTML5 data attributes.

   Log in to Reply

3. Google now officially supports responsive ads (currently in BETA). There is a good writeup of the functionality here with links to the official Google docs.

   http://exisweb.net/using-google-adsense-async-tags-for-responsive-design

   It works, but one drawback is that when you resize the viewport, the ads don’t automatically resize. From what I understand, it is against the TOS to try to call the adserver when the viewport resizes.

   Log in to Reply

4. There’s a plugin called Responsive Adsense. It adds a widget with 5 ad fields and you enter pub id and ad id in them. Then based on the size of the screen it renders 1 of the 5 ads. I tried it on a mobile browser and it rendered a block sized ad instead of the mobile one.

   Log in to Reply

5. To maintain my page responsive, I did it this way:

   <div class="table table-responsive">    
           <div class="text-center text-muted">
               <hr><br>
               <small>advertisement</small>
               <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
               <!-- bottom -->
               <ins class="adsbygoogle"
                    style="display:block"
                    data-ad-client=""
                    data-ad-slot=""
                    data-ad-format="auto"></ins>
               <script>
                   (adsbygoogle = window.adsbygoogle || []).push({});
               </script>  
               <br>
           </div>       
   </div>
   

   Log in to Reply

6. I agree with what Equilibrium3 posted. Select the Ad Size = Responsive Ad Unit (Beta). Once you get the Ad Code, you can place it inside a <div class="span12"> that is also inside a <div class="row">. This worked for me for placing an horizontal ad and having it centered too.

   This is the page where I have that horizontal ad -> http://www.espaciodigital.mx/

   Now, if you want to place the Ad code on a side bar, do the same as above, but split the page using, say, <div class="span3"> for the side bar and <div class="span9"> for the rest of the page.

   I did that in the following page, where the square ads are on the left -> http://www.espaciodigital.mx/quienes_somos.html

   Both ads work fine when seen in a mobile device. Give it a try. Hope that helps!

   Log in to Reply