Set max height of Adsense responsive ad unit

Question

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,

Kes

galeksic · Accepted Answer · 2016-08-20T11:52:51.113

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.

So glad I found this. I was considering doing some crazy Javascript size detection to serve different ad units because I couldn't stand seeing those square ads. Thanks! — Dan Leveille, Oct 14 '16 at 06:33
`data-ad-format` impacts only on desktop resolutions https://support.google.com/adsense/answer/9183460 — Davide, Jan 14 '21 at 12:01
Note. You must set a height for the parent div to reserve the space and avoid layout shifting. Else your CLS score will go red, i'm talking about core vitals. — Michael Rogers, Jul 19 '21 at 09:33

score 10 · Answer 2 · edited Jun 06 '20 at 08:43

10

I've just managed to fix this - you can set a comma seperated list for data-ad-format.

data-ad-format="rectangle, horizontal"

This sets the mobile ad to horizontal and the desktop to rectangle if you have set your media queries specific sizes.

Thanks, Wesiwyg

edited Jun 06 '20 at 08:43

Kerem

11,377
5
59
58

answered Mar 24 '15 at 12:47

Wesiwyg

101
1
3

score 3 · Answer 3 · answered Oct 28 '20 at 10:13

3

Working for me at October 2020:

<ins class="adsbygoogle"
     style="display:inline-block;min-width:320px;max-width:970px;width:100%;height:50px"
     data-ad-client="ca-pub-xxx"
     data-ad-format="fluid"
     data-ad-slot="xxx"></ins>

answered Oct 28 '20 at 10:13

J_blue

31
3

score 2 · Answer 4 · answered Jan 26 '20 at 16:50

Working for me at january 2020 :

1 - Disabled "auto size for mobile"

2 - Define an "non-responsive" ads (fixed) from default value

3 - add your code and change size of it why you want with css. Exemple for me :

<ins class="adsbygoogle" style="display:inline-block;width:100%;height:100px" data-ad-client="****" data-ad-slot="****"></ins>

With this code my ads take always 100% of width and max 100px of height. I think you can add "min-width" and "max-width" value.

3 conditions can lead to resize your ad without your knowledge :

1 - If the ad is a "responsive ad"

2 - If the parameter "optimize size of ads on mobile" is activated

3 - If the global "automatic ads" is activated with "Optimize your existing ad units?" set to on.

What do you mean from _"max 100px of height"_ ? This is most likely **always** 100px of height, isn't it? — cbdeveloper, Feb 11 '20 at 11:06
@cbdeveloper : Yes I think, you can also try with : "height : auto" and "max-height:100px". — user2267379, Feb 12 '20 at 16:58

score 1 · Answer 5 · answered Dec 03 '19 at 13:43

1

I would go with this:

            style="display:inline-block;min-width:200px;max-width:300px;width:100%;height:250px"
            data-ad-format="horizontal"></ins>

Google itself recommends it this way and it really works for me:

https://support.google.com/adsense/answer/9467650?hl=en-GB

answered Dec 03 '19 at 13:43

Kviz Majster

108
6

Thanks a bunch! Changing the "data-ad-format" to "horizontal" worked well enough. It still sets a 90px minimum height, but I can accept that for certain browsers like Firefox. – Cake Princess Jan 02 '23 at 03:06

score 0 · Answer 6 · edited Feb 11 '17 at 13:38

To get this done, First set the ad container or ad code to center. by using this tag: <center>Adsense code here</center>. and then set the maximum height or width and minimum height or width like the way I did in the example below.

<center>
  <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
  </script>
  <!--responsive ad -->
  <ins class="adsbygoogle" style="display:block;max-width:specify your maximum width here; max-height: set o your maximum height here; and do the same for min-height:here;min-width:here;"
      data-ad-client="ca-pub-0019"
      data-ad-slot="530000000000"
      data-ad-format="auto"></ins>
  <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
  </script>
</center>`

I believe that max-height will not work properly; their responsive ads can either have an unspecified height, or a fixed height, but not an unspecified height with a maximum. Unlike width, where max-width will work fine. The best way to have influence over height if you don't need a fixed height but just want to keep it a certain approximate shape is via data-ad-format. — thomasrutter, Feb 06 '18 at 01:45

Mladen Adamovic · Answer 7 · 2020-10-01T05:51:15.483

0

As of January 2020, max-height on ins which displays seems to work without bugs (if you do that on the parent container, there are bugs), so this seems to work (I'm using it in the production):

<ins class="adsbygoogle"
     style="display:block; max-height: 336px"
     data-ad-client="ca-pub-XXXXXX"
     data-ad-slot="YYYYYY"
     data-ad-format="auto"></ins>

EDIT: this is officially possible as of August 2019, see https://support.google.com/adsense/answer/9467650?hl=en

edited Oct 01 '20 at 05:51

answered Jan 30 '20 at 11:44

Mladen Adamovic

3,071
2
29
44

With data-full-width-responsive="true" google does not follow the height limit. – Julius Barra Sep 30 '20 at 13:06

score 0 · Answer 8 · answered Oct 22 '21 at 16:01

The below code given in the google AdSense support page for the responsive ad

<style>
.example_responsive_1 { width: 320px; height: 100px; }
@media(min-width: 500px) { .example_responsive_1 { width: 468px; height: 60px; } }
@media(min-width: 800px) { .example_responsive_1 { width: 728px; height: 90px; } }
</style>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXX11XXX9" crossorigin="anonymous"></script>
<!-- example_responsive_1 -->
<ins class="adsbygoogle example_responsive_1"
     style="display:inline-block"
     data-ad-client="ca-pub-XXXXXXX11XXX9"
     data-ad-slot="8XXXXX1"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

for more details, you can refer here ( https://support.google.com/adsense/answer/9183363?hl=en )

score -1 · Answer 9 · answered Jun 06 '21 at 18:26

Try this

Set max height of Adsense responsive ad unit

9 Answers9

Linked