Limiting the height of Adsense's responsive ad unit

Question

Limiting the height of Adsense's responsive ad unit

Before, I had 2 x (300x250) Adsense ad units on the right side bar of my website.

Recently, I made my site responsive and replaced those ad units with Adsense responsive ad units.

Now, the issue is that Adsense is serving 2 x (300x600) ad units when their Terms of Service only allow for 1 (300x600) ad unit per page.

The maximum width seems to be causing Adsense to display the larger ad units.

Even when I try to set the max-height of the parent div to 250px to restrict the number of 300x600 ads shown, Adsense ignores it and displays them anyway.

Has anyone else faced this problem, and if so, how did you successfully limit the height of the responsive ad unit?

Thank you in advance,

Kes

css responsive-design adsense

Answer 1

Answer №1

To enhance the display, you may consider changing data-ad-format="auto" to data-ad-format="rectangle". For more details, check out the Advanced features section and view the Horizontal shape example.

In my opinion, it is advisable to avoid specifying the height (or max-height) on the parent div.

The ad height is automatically adjusted by adsbygoogle.js through smart sizing. If you wish to manage the ad's height, utilize the data-ad-format attribute with options like "rectangle", "vertical", "horizontal", or a customized combination such as "rectangle,horizontal".

Alternatively (although not recommended), you could eliminate the data-ad-format attribute from the ad code and then set specific size(s) using @media queries. Refer to the Exact size example for guidance.

UPDATE - Google has made changes to the "Technical considerations" segment in the "About responsive ad units" page.

In certain scenarios, additional measures must be taken to ensure that a responsive ad unit functions correctly:

...

The parent container has fixed or limited height. It is important not to place responsive ads within containers of fixed or restricted height, as they might appear differently on various devices or browsers. To restrict the height of your responsive ads, adjustments need to be made in your code using CSS media queries to determine the parent container's height. Learn how to make these changes by visiting the guide on modifying your responsive ad unit.

Answer 2

To enhance the display, you may consider changing data-ad-format="auto" to data-ad-format="rectangle". For more details, check out the Advanced features section and view the Horizontal shape example.

In my opinion, it is advisable to avoid specifying the height (or max-height) on the parent div.

The ad height is automatically adjusted by adsbygoogle.js through smart sizing. If you wish to manage the ad's height, utilize the data-ad-format attribute with options like "rectangle", "vertical", "horizontal", or a customized combination such as "rectangle,horizontal".

Alternatively (although not recommended), you could eliminate the data-ad-format attribute from the ad code and then set specific size(s) using @media queries. Refer to the Exact size example for guidance.

UPDATE - Google has made changes to the "Technical considerations" segment in the "About responsive ad units" page.

In certain scenarios, additional measures must be taken to ensure that a responsive ad unit functions correctly:

...

The parent container has fixed or limited height. It is important not to place responsive ads within containers of fixed or restricted height, as they might appear differently on various devices or browsers. To restrict the height of your responsive ads, adjustments need to be made in your code using CSS media queries to determine the parent container's height. Learn how to make these changes by visiting the guide on modifying your responsive ad unit.

Answer 3

Answer №2

Great news - I successfully resolved this issue by utilizing a comma-separated list for data-ad-format.

data-ad-format="rectangle, horizontal"

By doing this, the mobile ad will display in a horizontal format and the desktop ad will be shown as a rectangle, provided that you have specified sizes in your media queries.

Best regards, Wesiwyg

Answer 4

Great news - I successfully resolved this issue by utilizing a comma-separated list for data-ad-format.

data-ad-format="rectangle, horizontal"

By doing this, the mobile ad will display in a horizontal format and the desktop ad will be shown as a rectangle, provided that you have specified sizes in your media queries.

Best regards, Wesiwyg

Answer 5

Answer №3

My current successful setup as of October 2020:

<ins class="adsbygoogle"
     style="display:inline-block;min-width:300px;max-width:900px;width:100%;height:60px"
     data-ad-client="ca-pub-yyy"
     data-ad-format="fluid-responsive"
     data-ad-slot="yyy"></ins>

Answer 6

My current successful setup as of October 2020:

<ins class="adsbygoogle"
     style="display:inline-block;min-width:300px;max-width:900px;width:100%;height:60px"
     data-ad-client="ca-pub-yyy"
     data-ad-format="fluid-responsive"
     data-ad-slot="yyy"></ins>

Answer 7

Answer №4

When I was working in January 2020, here are the changes that worked for me:

1 - I disabled the "auto size for mobile" option.

2 - I set a fixed "non-responsive" ad size instead of the default value.

3 - You can add your own code and use CSS to customize the size as needed. For example:

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

With this code, my ads always take up 100% of the width and a maximum of 100px in height. You can also consider adding values for "min-width" and "max-width".

There are three conditions that could unknowingly resize your ad:

1 - If the ad is responsive

2 - If the "optimize size of ads on mobile" setting is enabled

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

Answer 8

When I was working in January 2020, here are the changes that worked for me:

1 - I disabled the "auto size for mobile" option.

2 - I set a fixed "non-responsive" ad size instead of the default value.

3 - You can add your own code and use CSS to customize the size as needed. For example:

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

With this code, my ads always take up 100% of the width and a maximum of 100px in height. You can also consider adding values for "min-width" and "max-width".

There are three conditions that could unknowingly resize your ad:

1 - If the ad is responsive

2 - If the "optimize size of ads on mobile" setting is enabled

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

Answer 9

Answer №5

My preferred option would be the following:

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

This method is recommended by Google itself and has proven to be effective for me:

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

Answer 10

My preferred option would be the following:

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

This method is recommended by Google itself and has proven to be effective for me:

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

Answer 11

Answer №6

In order to achieve this, start by centering the ad container or ad code using the following tag:

<center>Adsense code here</center>

. Then, specify the maximum and minimum height or width as demonstrated 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>`

Answer 12

In order to achieve this, start by centering the ad container or ad code using the following tag:

<center>Adsense code here</center>

. Then, specify the maximum and minimum height or width as demonstrated 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>`

Answer 13

Answer №7

Starting from the beginning of 2020, I have found that setting max-height on ins elements seems to function properly without any glitches (as long as it is applied to the parent container, not directly). Here is an example of how I am utilizing this in a production setting:

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

UPDATE: It has been officially confirmed that this method is supported since August 2019. More information can be found at https://support.google.com/adsense/answer/9467650?hl=en

Answer 14

Starting from the beginning of 2020, I have found that setting max-height on ins elements seems to function properly without any glitches (as long as it is applied to the parent container, not directly). Here is an example of how I am utilizing this in a production setting:

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

UPDATE: It has been officially confirmed that this method is supported since August 2019. More information can be found at https://support.google.com/adsense/answer/9467650?hl=en

Answer 15

Answer №8

The following code snippet is provided on the Google AdSense help page for creating responsive ads:

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

For more information, please visit https://support.google.com/adsense/answer/9183363?hl=en

Answer 16

The following code snippet is provided on the Google AdSense help page for creating responsive ads:

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

For more information, please visit https://support.google.com/adsense/answer/9183363?hl=en

Answer 17

Answer №9

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

Give this a shot

Answer 18

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

Give this a shot

Limiting the height of Adsense's responsive ad unit

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Answer №9

Similar questions

Ensure that the Left and Right menu are fixed in position, while allowing the middle content to be scrollable

Issue with displaying sidebar using blockquote in Bootstrap 4.1.3

The Safari 7.1+ browser seems to be having trouble with the spotlight effect

Misplaced SVG background images causing layout issues

Is anyone else seeing a mysterious gray outline surrounding the image?

Can the Caption Adapt to the Image?

What are some ways to apply selector combinators to hashed CSS module classes?

Unable to load CSS in Node.js when the parameter in Express.js is too long

What is the best way to eliminate the extra spacing on the right side of my navigation bar?

Ensuring uniformity in picture size while uploading images in Angular by resizing and including white borders

Arrangement of layers while adjusting browser size

Creating a dynamic dropdown list populated with Jinja templates

What is the best way to update just the image path in the source using jQuery?

Unable to Utilize Custom Colors in Tailwind CSS within NextJS

What is the significance of positioning a:hover after a:link and a:visited?

Issue with Dotless MVC bundling occurring when attempting to import a specific less file multiple times

What is the best way to conceal part of a chart or a div in Angular?

Is it possible to customize the default translucent image that appears when the onDragStart event is triggered in a browser?

Which library does stackoverflow utilize to showcase errors (utilizing Bootstrap popover for error help-block)?

What is the technique for creating a repeating image rather than stretching it?