About responsive ad units

Responsive web design allows you to dynamically control the presentation of your website according to the properties of the screen/device that it’s being viewed on. By using a responsive ad unit, you can control the size of the ads on your page, in line with how you control the layout of the rest of your page across devices. For more information on responsive design in general, see Building Smartphone-Optimized Websites on the Google Developers site.

Key features

  • Automatic sizing based on the space available. To make your code simpler and save you time and effort, our responsive ad code automatically adapts the ad unit size to your page layout. We calculate the required size dynamically based on the width of the ad unit’s parent container, then determine what's the best standard height to go with that width.

    For example, if you have a <div> with a width of 30% and you place our ad code within the <div>, then depending on the width of the user's screen, we’ll automatically serve different ad sizes. If your page is viewed on a tablet with a width of 1024px, we'll serve a 307x250 ad, and if it's view on a 21" desktop PC with a 1680px width, we'll serve a 504x60 ad.
  • Support for ad size changes after a screen orientation change. If your responsive page changes its layout following a device orientation change (e.g., when a tablet or phone goes from portrait to landscape), we’ll request and load a new ad of the correct dimensions to fit the new page layout.

    Note:
    • When we load a new ad following a device orientation change, we cache the original ad that was shown. If the device then returns to its previous orientation, we’ll show the original ad again rather than load another new ad.
    • As the ad refresh behavior for screen orientation changes creates additional ad requests, you might notice a slight decrease in your RPM and CTR metrics. Please be assured though that there's no impact to your overall revenue.

Technical considerations

There are some situations in which you’ll need to take extra action to make a responsive ad unit work correctly:

  • Your site uses third-party JavaScript. If your site uses scripts that are executed before our responsive ad code, for example, to hide the ads in your page until the page has fully loaded, then our ad code won’t be able to calculate the required size for the responsive ad unit. In this case, you’ll need to modify your code and use media queries to set the size of the ad unit. Find out how to modify your responsive ad unit.

  • The parent container has no width set. If you place your responsive ad code within a parent container that doesn’t have an explicit width set, for example, within a floating element, then our ad code won’t be able to calculate the required size for the responsive ad unit. In this case, you’ll need to modify your code and use media queries to set the size of the parent container. Find out how to modify your responsive ad unit.

Additionally, you should be aware of the following:

  • Mobile devices with poor connections. On mobile devices with poor connections you might see some browser reflow while our responsive ad code calculates the best standard height for the width of your parent container.