AdSense automatically adjusts the height of In-feed ads to ensure that 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.
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:120 px
. 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=i-gno/re-d1234567890123456" 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="i-gno/re-d1234567890123456"
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:
- Resize your site to a range of screen widths, e.g. 350px, 500px, 1000px.
- 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=i-gno/re-d1234567890123456" 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="i-gno/re-d1234567890123456"
data-ad-slot="123456"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
infeed
) throughout your ad code.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 that they're inside. Their height is based on the content of the ad itself and the In-feed ad settings that 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.