user3275551 user3275551 - 1 year ago 175
CSS Question

Set max height of Adsense responsive ad unit

I had 2 x (300x250) Adsense ad units in the right side bar of my site

I have made the site responsive and replaced these ad units with Adsense responsive ad units.

The problem i now have is that Adsense is now serving 2 x (300x600) ad units. Adsense TOS state that you can only serve 1 (300x600) ad unit per page

The max width is obviously getting picked up by adsense responsive ad units.

But when I try and set the max-height of the parent div to 250px, to limit the number of 300x600 ads per page, the max-height gets ignored and adsense still displays a 300x600

Has anyone else encountered this problem and if so, how did you manage to set the max-height of the responsive ad unit?

Thanks in advance,


Answer Source

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.