The Ultimate Guide To Building Powerful Responsive AdSense Units With CSS Tricks

Responsive ad units are one of the most powerful AdSense tools introduced in recent years. Using a single responsive ad code and some CSS magic, publishers can optimize ads for a plethora of devices and screen sizes and skyrocket earning potential.

A little responsive history

Responsive web design has been all the rage since web developer Ethan Marcotte coined the term back in 2010. The rise of smartphones, tablets and every-device-in-between gave rise to lofty new challenge for web developers: ensuring their content looked pretty, readable and accessible on everything from a super widescreen monitor to a petite phone screen.

So what exactly is responsive web design? Essentially, responsive design refers to web pages that “respond” to different conditions like viewport size (the size of your browser window), screen orientation (portrait or landscape) and resolution. We’re going to focus heavily on that first point in this article: viewport size.

The bread and butter of responsive web design is a new CSS3 feature called media queries. Web developers can now test for these conditions, e.g. “is the user on a mobile-sized screen, and serve different CSS (Cascading Style Sheets, the styling and presentation language of the web) to format their content to best suit that context.

A problem for AdSense publishers

In the days of the desktop web, conventional AdSense sizes like the 728x90 and 468x60 banners, and 336x280 and 300x250 rectangles could confidently be served without too much concern for device optimisation. Layouts were generally table based, and separate ads could be slotted into fixed width spaces and rendered with pixel perfection.

Then came the smartphone and the rise of the mobile web. In 2017, more than 50% of web traffic came from a mobile devive. Web pages needed to understand browser context and shift and scale to fit. But what about AdSense ads? Ads that looked great on a large desktop screen were now inappropriately large on mobile. Worse than just “looking bad”, ads could be clipped by the viewport, or overlap with text and images.

This was a big problem: not only did it render both the ads and content fairly useless, but it opened publishers up to some pretty serious AdSense program policy violations.

Before responsive ads

Before responsive ads, there were a couple of solutions publishers could use to serve different ads to readers with smaller screens. The most popular approach was to serve a totally different site to mobile users. I’m sure you’ve all come across a m.wpblogtuts.com style URL at some point.

In WordPress world, developers could build a totally separate theme — with new templates and ad codes — and serve this (usually via a plugin) to mobile users. The problem? This worked wonderfully if you were happy serving ads to a desktop browser and a conventionally-standard mobile browser.

What about tablets? What about those edge devices in between? What about some new device that doesn’t exist at the time of writing this article? Plus there’s the headache of maintaining two (or more!) themes.

Enter the “responsive” ad unit

Google introduced the responsive AdSense ad unit back in 2013, and it’s currently the default size option for both regular text and image display ads, as well as link units. We’ll focus on regular text and image ads in the following code examples, but these same principles are applicable to link units too.

Now that we understand a little about the history of responsive web design and some of the challenges it presented AdSense publishers, let’s create a new ad unit and dive straight into what you came for: some problem solving code.

1. Build a responsive ad

Before we can start applying CSS, let’s create a responsive ad unit. Create a new ad like you would any other, but make sure to select the “responsive” option under the ad size dropdown (this is the default option nowadays). Give the ad a name and configure your colour scheme.

Copy the provided AdSense code, which will look like this:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-0000000000000000"
     data-ad-slot="0000000000"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

(Note that we’re using dummy data-ad-client and data-ad-slot values in these examples. Your code will have account-specific variables here.)

2. Wrap the ad in a container element

This is where things start getting interesting. We’re going to wrap the AdSense unit in a container <div> to help precisely position it on the page, while maintaining total control over size of the ad at all times. Give your wrapper a memorable class name — we’ll use this to identify the ad in our CSS.

<div class="responsive-ad-wrapper">
  <!-- Your Google AdSense code goes in here -->
</div>

3. Apply a class to the ad unit

Finally, we’re going to apply a class to Google’s ins element. It’s useful if both your wrapper and ad classes are clearly paired, but you can call these whatever you want. Personally, I like to append the wrapper keyword to the container element:

<div class="responsive-ad-wrapper">
  <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  <ins class="adsbygoogle responsive-ad"
       style="display:block"
       data-ad-client="ca-pub-0000000000000000"
       data-ad-slot="0000000000"
       data-ad-format="auto"
       data-full-width-responsive="true"></ins>
  <script>
  (adsbygoogle = window.adsbygoogle || []).push({});
  </script>
</div>

Drop the HTML somewhere on your page, and let’s get styling!

Different ads for different dimensions

The first method for optimizing your responsive AdSense ads doesn’t actually involve any CSS at all. By default, Google sets the data-ad-format parameter to auto. This means a responsive ad unit will automatically fill the available space (dictated by the parent container element, or your site layout).

There are three additional values you can set this parameter to instead:

• horizontal
• vertical
• rectangle

Google will attempt to show an ad with the general shape you specify. You can even specify multiple fallback values, separated by a comma: data-ad-format="horizontal, rectangle".

This is a great solution for quickly building up responsive ads, but the major downside is that you’re forced to serve ads of the same general shape to all screen sizes. For more fine-grained control, we can move those adjustments over to our CSS.

CSS adjustments

Now that we’re going to use CSS to precisely size and position our AdSense ads, you can remove the data-ad-format parameter completely. We don’t want Google to attempt to calculate the right ad to serve — we’re going to explicitly tell Google the size we want.

The first CSS adjustment we’re going to make is to define a default size for our ad. Let’s take the example from the image above and imagine we’re designing a blog post with a 728x90 leaderboard that will sit between two paragraphs of text.

Open up your stylesheet (style.css in your theme folder if you’re using WordPress) and set the base size by applying a fixed width and height value to both the wrapper and ad elements:

.responsive-ad-wrapper,
.responsive-ad {
  width: 728px;
  height: 90px;
}

Using CSS3 media queries, let’s turn that billboard into a 336x280 rectangle on a tablet-sized screen:

.responsive-ad-wrapper,
.responsive-ad {
  width: 728px;
  height: 90px;
}
@media screen and (max-width: 768px) {
  .responsive-ad-wrapper,
  .responsive-ad {
    width: 336px;
    height: 280px;
  }
}

This media query syntax is the key to making powerful AdSense customisations, so let’s breakdown exactly what’s happening:

1. We set a default width and height value.
2. We then check if the screen size is no larger (max-width) than 768px.
3. If so, redefine those width and height values.

Well done! You’ve now created a single AdSense unit that responds to the screen size. Let’s repeat the process and transform that ad into a 300x250 mobile-appropriate rectangle for our smartphone users:

.responsive-ad-wrapper,
.responsive-ad {
  …
}
@media screen and (max-width: 768px) {
  .responsive-ad-wrapper,
  .responsive-ad {
    …
  }
}
@media screen and (max-width: 400px) {
  .responsive-ad-wrapper,
  .responsive-ad {
    width: 300px;
    height: 250px;
  }
}

A flexible width and height

Having the ability to change the exact ad dimensions for different screen sizes is powerful, but there is a more flexible solution. You can tell AdSense to serve ads that have a minimum or maximum width or minimum or maximum height, or a combination thereof. In other words, you can tell Google to find the best ad to fit the available space.

/* Variable width, fixed height */
.responsive-ad-wrapper,
.responsive-ad {
  height: 600px;
  min-width: 120px;
  max-width: 300px;
  width: 100%;
}

Let’s break this example down:

1. The ad has a fixed height of 600px.
2. The ad has a minimum width of 120px.
3. The ad has a maximum width of 300px.

This CSS tells Google to serve an ad that is 600px tall and somewhere in the range of those two width values. That means you have the potential of seeing either a 120x600, 160x600 or 300x600 skyscraper, depending on what is available in the AdSense inventory.

(Note that a width value is required. We set it to 100% so that our ad conforms to the size range.)

In this example:

/* Fixed width, variable height */
.responsive-ad-wrapper,
.responsive-ad {
  width: 970px;
  min-height: 90px;
  max-height: 250px;
  height: 100%;
}

… Google will attempt to serve an ad that is 970px wide and, at most, 250px tall. That means that you’ll see either a 970x250 billboard or a 970x90 large leaderboard depending on what AdSense has available to serve.

Why is this useful?

In the end, you want AdSense ads on your site that will perform. Google won’t always be able to serve an ad of a particular size at a particular time. By setting variable dimensions, you’re helping Google find an ad to serve by defining the general shape you have available (e.g. a rectangle or a banner slot), but letting Google decide the actual ad size.

Back to the wrapper element

At this point you might be wondering what the deal is with the wrapper element. So far, we’ve just duplicated all of our CSS rules and applied them to both the wrapper and ad unit. The power of the wrapper element is that it helps us position ads with precision and keep that positioning code separate from our ad dimensions.

Take the tablet and phone example from above. These responsive ads look great, but their position could absolutely be optimized. How about this instead?

Let’s take a look at how we’re using the wrapper element to do this:

.responsive-ad-wrapper,
.responsive-ad {
  width: 728px;
  height: 90px;
}
@media screen and (max-width: 768px) {
  .responsive-ad-wrapper,
  .responsive-ad {
    width: 336px;
    height: 280px;
  }
  .responsive-ad-wrapper {
    float: right;
    margin-left: 20px;
    margin-bottom: 20px;
  }
}
@media screen and (max-width: 400px) {
  .responsive-ad-wrapper,
  .responsive-ad {
    width: 336px;
    height: 280px;
  }
  .responsive-ad-wrapper {
    float: none;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
  }
}

And there you have it, a single piece of ad code generating three different ad sizes, in three unique positions that are both sympathetic and suited to the browser context.

Dividing lines

Let’s take a look at a couple more interesting use cases. How about we add some horizontal dividing borders to our ad on mobile? With the help of our wrapper element, that’s easy!

@media screen and (max-width: 400px) {
  .responsive-ad-wrapper,
  .responsive-ad {
    width: 336px;
    height: 280px;
  }
  .responsive-ad-wrapper {
    border-top: 1px solid;
    border-bottom: 1px solid;
    margin: 20px auto;
    padding-top: 20px;
    padding-bottom: 20px;
    height: auto;
  }
}

Hang on! A note for the CSS gurus

The CSS aficionados among you might be asking why the wrapper element is necessary at all? Couldn’t we just apply those styles directly to the ad? Well, yes, we could. But there’s a couple of reasons I advocate for a separation:

1. Readable code is maintainable and extensible. It’s easy to build up a huge blob of media query rules and lose track of what you’re actually doing. Keeping the positioning rules separate from the ad dimensions makes these ad sizes easy to parse and adjust.
2. You can add borders and background colours (as long as they are policy compliant) to the wrapper element. You can’t add those directly to the ins element.
3. You might want to reuse ad dimension styles, but have unique per-ad positioning. In this scenario, you could have a unique wrapper class and a reusable ad class. No need to redefine those width and height styles multiple times just because you want one ad on the left and another on the right.

Hiding ads completely

What if you want to hide an ad completely? Google allows publishers to use the CSS display property to completely hide an ad for specific contexts:

@media screen and (max-width: 300px) {
  .responsive-ad-wrapper,
  .responsive-ad {
    display: none; /* Don't show this ad on screens 300px or narrower */
  }
}

Full width responsive

Similarly, Google recommends adjusting ads on smaller devices so that they stretch to the edges of the screen, creating a more seamless boundary. If the data-full-width-responsive attribute is set to true (which it is by default), Google will attempt to utilise all the horizontal space available.

Think bigger

One point worth mentioning is that the media query approach tends to focus on shrinking screens. What about an inverse approach? What about increasing the size of our ads on larger screens?

The standard leaderboard is a great example. We can test for widescreen devices and serve a larger, juicier billboard to those users with acres of screen real estate.

@media screen and (min-width: 1400px) {
  .responsive-ad-wrapper,
  .responsive-ad {
    width: 970px;
    height: 250px;
  }
}

(Note the min-width keyword instead of the max-width we’ve been using so far.)

Flip it!

We’ve saved this one until last. Did you know that media queries can be applied to vertical space too? That means you can test the height of the viewport. You could combine this technique with a width media query and determine the shape of a user’s browser. Knowing this, you could adjust the balance between ads and content visible above the fold.

Are responsive ads worth it?

When it comes to working with responsive AdSense ads, we’ve only scratched the surface with a few proof of concepts. The potential is enormous. Google obviously values responsive ads: they’re now the default option when creating a new AdSense unit. In this author’s opinion, responsive ads are absolutely worth learning to implement and adjust and should be a staple in your AdSense arsenal.

Not only is there far greater earning potential in serving ads that are sympathetic to the context in which they are displayed, but you’re going a long way to future-proofing your website. The range of devices and screen sizes is only going to become more fragmented. It takes only a few CSS tweaks to adjust an existing ad for some glorious new future format. No need to generate a new ad. No need to massively redesign your layout.

You’d be hard pressed these days to find a valuable website that isn’t responsive. The ever-increasing range of rich web-capable devices means that websites simply have to adapt to browser context. That same level of design consideration should absolutely be given to your ads. Invest in learning about responsive design practices and watch your AdSense earnings grow.

In summary, these are our best-practice tips for using responsive AdSense ads:

TL;DR: Tips for earning more from responsive ads

• Consider experimenting with the data-ad-format parameter for a easy responsive optimization.
• Set a variable width or height property so that Google can find the best ad format to suit.
• Use the data-full-width-responsive attribute to make ads full width on mobile.
• Use a wrapper <div> to control the position of responsive AdSense ads.
• Consider using display: none to hide ads on smaller screens (or the inverse).
• Consider using vertical media queries to adjust the balance between ads and content above the fold.
• Don’t forget widescreens. Consider upsizing your ads using the min-width media query settings.
• Ultimately, like any AdSense endeavour, fine tuning is key. Test, experiment and test again. Create new sizes. Try new placements. Target different devices. See what works for your site. With responsive AdSense ads the adjustments you can make are endless.

Are you using responsive AdSense ads? Are they performing for you? Are you using any other CSS tricks to optimize your ads? Let us know in the comments or hit us up on Twitter.