Set the height of your In-feed ad

AdSense automatically adjusts the height of In-feed ads to ensure they fit well in the available space. This automatic sizing means that most publishers won't need to make any changes to the height of their In-feed ads. However, if you have specific requirements for the height of your In-feed ad, you can modify your In-feed ad code to set the height you want. Depending on whether your feed is on a non-responsive or a responsive site, you can either set a fixed height or a variable height.

Note: The examples described in this article are acceptable modifications of the AdSense ad code. You won't violate the AdSense Program policies by modifying your In-feed ad code in these approved ways.

How to set a fixed height (non-responsive sites)

You can specify a fixed height for your In-feed ad by adding a height attribute to your ad code, e.g., height:120px. Use this option if your In-feed ad unit is in a fixed container, i.e., it's not responsive.

If you don't know what height to set, you can use your browser's developer tools to determine the exact height for your ad without whitespace. For more information, see: How to determine the size of the images in your feed.

This example shows an In-feed ad with a fixed height of 120px:

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-12345" crossorigin="anonymous"></script>
<ins class="adsbygoogle"
     style="display:block;height:120px"
     data-ad-format="fluid"
     data-ad-layout="image-top"
     data-ad-layout-key="xxxxxxxx"
     data-ad-client="ca-pub-12345"
     data-ad-slot="123456"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

How to set a variable height (responsive sites)

If the width of your In-feed ad unit is dependent on the screen width, i.e., it's responsive, you'll need to use CSS media queries in your ad code to specify a different height per screen width.

To determine which heights to set, we suggest you:

1. Resize your site to a range of screen widths, e.g., 350px, 500px, 1000px.
2. For each width, use your browser's developer tools to determine the exact height for your ad without whitespace. For more information, see: How to determine the size of the images in your feed.

This example shows an In-feed ad with a height of 180px for screen widths up to 350px, a height of 130px for screen widths from 500 to 800px, and a height of 200px for screens widths over 800px:

<style>
  @media (min-width: 350px) {
    .infeed {
      height: 180px;
    }
 @media (min-width: 500px) {
    .infeed {
      height: 130px;
    }
  }
 @media (min-width: 800px) {
    .infeed {
      height: 200px;
    }
  }

</style>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-12345" crossorigin="anonymous"></script>
<ins class="adsbygoogle infeed"
     style="display:block;"
     data-ad-format="fluid"
     data-ad-layout="image-top"
     data-ad-layout-key="xxxxxxxx"
     data-ad-client="ca-pub-12345"
     data-ad-slot="123456"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

Important: We've highlighted the modifications you need to make to your ad code in the example above. Make sure that use the same class name (e.g., infeed) throughout your ad code.

After you've changed your ad code don’t forget to test your In-feed ad on various screen sizes to make sure the height you've chosen works across devices.

Why do my In-feed ads sometimes have extra whitespace or a More button?

In-feed ad units are responsive and support a wide range of viewports. They automatically adapt their size to fit your page layout by expanding to the full width of the feed container they're inside. Their height is based on the content of the ad itself and the In-feed ad settings you've chosen in AdSense.

Occasionally, when an In-feed ad is in the user's viewport (above the fold), we're not able to adjust the ad height without causing your content below the ad to reflow. In these cases, we might leave some empty space or show a More button to expand the ad. We do this to provide the best user experience.