Help Center Manage Your Account Ad Tag

How do I make ads responsive on mobile devices?

Visitors view your website through many different types of Internet-enabled devices: desktops, laptops, netbooks, tablets, smartphones, TVs, etc. That means there are many different screen dimensions and resolutions to consider. A common goal is that your website's content and accompanying ads should display correctly and consistently on the majority, if not all, of these devices.

To accomplish this task, there are a number of options, including CSS, JavaScript, and device detection to create a responsive ad. Depending on your ad setup and existing website design, you can choose a mobile ad serving option that works for your website and your advertiser's ads.

For your convenience, our adserver engine will automatically embed the CSS rule max-width:100%;height:auto; for image ads so the ad banner images are responsive on mobile devices by default.

Demo

Below is a simple example of a 728x90 banner ad that is responsive using this CSS rule:

<style>
.myResponsiveAd img {
  display:block;
  height:auto;
  max-width:100%;
</style>
<div class="myResponsiveAd">
  <script src="//g.adspeed.net/ad....."></script>
</div>

Demo of a simple responsive banner ad

CSS and JavaScript

Most modern smartphones and mobile devices support JavaScript and CSS like a regular laptop/desktop, so this solution is suitable if your target viewers are browsing your site using one of these more modern devices.

To be responsive, you can set the width and height via CSS rules to be relative (i.e. "max-width:100%;") in additional to a fixed pixel (i.e. "width:728px;"). This might involve adding a wrapper or extend existing CSS rules to apply onto the ad. We also recommend using the JavaScript-based serving code so that the CSS rules can be inherited down to the ad elements.

To make things simpler, less costly and more standardized, you do not need to code individual CSS rules and write the same JavaScript functions that are very common to many websites. Many off-the-shelf themes and templates are mobile-ready and responsive. Additionally, there are JavaScript/CSS frameworks that make it easy to setup modern front-end web design and layout. We recommend Bootstrap and Foundation, which are the leading frameworks to enable responsive design for your website and ads.

CSS3 Media Query

CSS3 has Media Query feature that can be used to adapt ad display with browser/device dimension detection.

Another approach to use Enquire.js for more control and functionality:

Responsive Iframe

For an Iframe, it should be placed within a DIV container for aspect ratio control within a responsive web design.

<style>
.myIframeDIV {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: xx%; /* the aspect ratio of the ad. Eg: 300x250 is 83% */
}
 
.myIframeDIV iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0; top: 0;
}
</style>
<div class="myIframeDIV"><iframe class="myIframe" src="xxxx"></iframe></div>

Demo of a simple responsive Iframe ad

Device Detection

Another approach is to use a gatekeeper, which redirects to mobile website or full site depending on the visitor's device. This gatekeeper can be implemented via your server-side software or via JavaScript as a client-side redirection. Then, you can have control over which ads are displayed via the zones. For example: on you desktop/full website template, you display the full-site zones. On your mobile website template, you display the mobile zones. This solution is suitable if you think JavaScript might not be available on your target devices or if you need more control over which ads to display.

Ad Restriction on Specific Devices

If you have an ad that is designed for a specific type of device, you can apply an ad restriction to only that device so that it is displayed properly. Viewers on other device types will not see this ad. This solution is suitable when the ad format demands it.

Testing a responsive ad placement

It is always a good idea to frequently test if your ads are responsive. You can do this by re-sizing the browser window manually, or by visiting your website using a mobile smartphone and any other devices that are likely used by your website visitors.