Set Max Height of Adsense Responsive Ad Unit

Set max height of Adsense responsive ad unit

You could change data-ad-format="auto" to data-ad-format="rectangle". (See Advanced features > Horizontal shape example.)

I think you should not define height (max-height) on parent div.

Ad height is (automatically) determined by adsbygoogle.js (that is smart sizing) and if you want to control ad height you need to use data-ad-format ("rectangle", "vertical", "horizontal" or your preferred combination like "rectangle,horizontal").

Or (not recommended) you could "downgrade" the ad code (by removing data-ad-format attribute) and then specify the exact size(s) with @media queries. (See Exact size example.)

---

EDIT - Google updated "Technical considerations" section on "About responsive ad units" page.

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

...

The parent container has fixed or limited height. Responsive ads should not be placed inside containers with a fixed or limited height,
as they may be taller on some devices or browsers. If you need to
limit the height of your responsive ads, you’ll need to modify your
code and use CSS media queries to set the height of the parent
container. Find out how to modify your responsive ad unit.

Adsense: serving different ad sizes on different devices

Although there isn't a "proper" solution to this, i.e. not one that is using AdSense units the way they were intended to be used by Google, there is a practical workaround that I have been using for years on one of my sites, and that to my knowledge is in line with their policies (they have never complained to me about it.)

The workaround is to use Google's responsive ads, placing them inside divs with fixed widths but variable (unspecified) heights, and using CSS to hide the div's containing the ads if the browser width is outside a certain range. To make this work:

• Make sure exactly one div displays for a particular screen width.
• (Optional but recommended) set margin: auto; on each div so that it centers itself horizontally in the layout.
• Set each div with a fixed width, but do not specify its height. This is because Google's responsive ads may serve ads of different heights so you must leave it flexible.
• Make sure the div disappears if the screen width gets sufficiently narrow, because you don't want Google serving a fixed-width ad that is truncated because of your layout, that could violate policies.

You can then have up to three "sets" of such divs, and as long as only one div from each set is visible at a time, you will be in line with Google's 3 ad units per page limit. If a window is resized and it reaches a breakpoint in the CSS and triggers a display of a different div size, the ad will simply disappear until the page is reloaded.

How to code the media queries? I recommend only the max-width constraint...it's the property you need, you don't need to look at screen or anything else. E.g. here is some of my code:

div.container_320
{
    margin: auto;
    width: 320px;
    display: none;
}
@media (max-width: 650px) { div.container_320 { display: block; } }
@media (max-width: 354px) { div.container_320 { display: none; } }

Then you can have:

<div class="container_320">
<! –– put adsense code here ––>
</div>

And this will achieve one of your divs. The div will appear only in a fixed range of widths; otherwise it will be hidden.

Then you need to make the others for whatever sets of different widths you want for the different max-widths of the user's browser. Put all div's of a set right after each other in the HTML. You can have as many such divs as you want, but I have found that usually having 3 is sufficient to optimize revenue while keeping the layout looking nice. Use Google Analytics or other data you have to look at the screen widths of people actually viewing your site.

You will need to adjust the dimensions and break points to fit your desired dimensions and layouts. Also, keep in mind the standard ad widths, and optimize that for your revenue. If you set the width to a non-standard size, you will find Google often serves very small ads with a lot of empty padding around them, and this is going to both look poor and forgo revenue because you're displaying in a small fraction of your available space.

Limit footer height to 100px with Google responsive add

The ads script appears to do two things:

• it overwrites your inline styling on your .footer with height: auto !important
• it contains inline styling on the add itself.

What you could do is place !important after each of your style declarations (for example:

.example_responsive_1 { width: 320px; height: 100px !important; }
@media(min-width: 500px) { .example_responsive_1 { width: 468px; height: 60px!important; } }
@media(min-width: 800px) { .example_responsive_1 { width: 728px; height: 90px !important; } }

While this does solve the footer sizing problem, it creates a different one: displaying the adds in a page real-estate only 100px tall - which appears to be the reason why the script overwrites the host element's height value in the first place.

One thing you could do to improve this is:

.example_responsive_1 {
  transform: scale(calc(10/28));
  transform-origin: top;
}

Another would be to make the footer's background transparent.

How to make responsive AdSense unit change its size on browser resize

There is no issue with your responsive Google Ads.

The Google Ads will not resize themselves automatically when you change the browser size. If you refresh your browser then Google Adsense will display/serve new ads with a size that will match the current size of your browser/page.

I tried to find documentation to verify my statement but I was not able to find anything relevant. My answer is based on my experience from using responsive Google ads and testing them.

---

Update 30/05/2019 - ALL AD UNITS RESPONSIVE BY DEFAULT

An email was sent by Google to Adsense publishers on the 30th of May 2019 informing about upcoming improvements to ad units.

The email says:

We’re committed to continuously investing in the modernisation of our advertising products. As a result, there are some important changes we're making to some AdSense features that you have used or configured in the past. Your Ads tab will be updated in the coming weeks to reflect the following changes:

Ad sizes
We've made it easier to create and manage ad units. All ad units will be created Responsive by default to adjust to different screen sizes on mobile and desktop for increased performance and flexibility. If you do need further customisation, you’ll still be able to create custom sized ad units.

So, in the coming weeks all ads will be Responsive be default. Here are two Google Adsense help pages with more information:

About responsive ad units

Create a responsive ad unit

Google Large AdSense Number Limit (with AdSense Responsive Unit)

In my understanding, two 970x90 ads on the same page are not a violation.

970x90 is "big" - it is 87.300 pixels total (970 x 90 = 87.300), but not bigger than 160x600 (which is 96.000) and 336x280 (which is 94.080).

That is why I believe it is not being considered as "large", and these are my calculations I'm basing my opinion on:

GPF: "One month, 1000 pages views (4000 by google analytics), 25 clicks = 0.50€"
https://productforums.google.com/d/msg/adsense/EWCYW25ISpg/g0uu8bKAc4cJ

This is actually just my comment, but I'm writing it as answer because (I need more space, and because) I don't think you can get the definite answer to your question: "I am currently using three responsive ad units in a single page. [...] Is that considered...":

• If you are not using data-ad-format and you are
  using @media queries to control the height, then you need to make
  sure your ads won't be something close|similar|not-even-comparable to 970x250. (That is fairly
  easy, but not what you are asking about.)
• If you are using
  data-ad-format, then adsbygoogle.js is taking care about the
  size, but - you'll want to test your placements, and if you see more than one "large", then you'll probably want to
  convert your ad code (from "smart sizing" with
  data-ad-format, to "exact size per screen width") and to control the
  height with @media queries.

So I'm afraid you need to make sure all your placements (smart-sized, exact-size, fixed size, etc.) are in compliance: having two "large" ad units on the same page is a violation of AdSense policies.

---

Related Topics