If you find that our responsive ad code doesn't do everything you need, you may modify your ad code to better meet the requirements of your responsive site. The examples in this article show you how to correctly make these modifications.
Before you start:
- If you're new to CSS media queries and modifying your ad code, we recommend you start with the exact ad unit size per screen width example.
- If you're already familiar with CSS media queries and modifying your ad code, you can go straight to the examples of advanced responsive ad code features section.
Exact ad unit size per screen width example
This example shows you how to modify your responsive code to set specific ad unit sizes for three ranges of screen widths, i.e., mobile, tablet and desktop. You don't need to have any previous experience of CSS media queries or modifying AdSense ad code to follow this example.
Here's some modified responsive ad code that sets the following exact ad unit sizes per screen width:
- For screen widths up to 500px: a 320x100 ad unit.
- For screen widths between 500px and 799px: a 468x60 ad unit.
- For screen widths of 800px and wider: a 728x90 ad unit.
<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=ignored1234567890123456" crossorigin="anonymous"></script>
<!-- example_responsive_1 -->
<ins class="adsbygoogle example_responsive_1"
style="display:block"
data-ad-client="ignored1234567890123456"
data-ad-slot="8XXXXX1"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
To adapt this sample code for your own site:
- Create a display ad unit in your AdSense account, making sure you leave Responsive selected in the "Ad size" section. Make a note of the following information from your responsive ad code:
- Your publisher ID, for example, ignored1234567890123456
- Your ad unit's ID (
data-ad-slot
), for example, 1234567890.
- In the sample code:
- Replace all instances of
example_responsive_1
with a unique name, e.g., Home_Page, front_page_123, etc.Notes:- Your unique name must only contain English letters (A-Z), numbers, and underscores, and the first character must be an English letter.
- You must use a different unique name each time that you adapt this sample code.
- Replace
ignored1234567890123456
with your own publisher ID. - Replace
8XXXXX1
with your own ad unit's ID.
- Replace all instances of
- Decide on the sizes you want your ad unit to take per screen width:
- If you're happy with the existing ad unit sizes in the sample code, then you don't need to make any additional changes.
- If you want to set different ad unit sizes per screen width, then, in the sample code:
- Replace
320px
and100px
with the width and height of the ad unit you want to use for screen widths up to 500px. - Replace
468px
and60px
with the width and height of the ad unit you want to use for screen widths between 500px and 799px. - Replace
728px
and90px
with the width and height of the ad unit you want to use for screen widths of 800px and wider.
- Replace
- Copy and paste your modified ad code into the HTML source code of the page where you'd like the ads to appear.
Tip: After you’ve placed your ad code, we recommend that you test your ads on different devices and screens to make sure that the responsive behavior is working correctly.
Advanced responsive ad code features examples
If you find that our responsive ad code doesn't do everything you need, you may modify your ad code to specify an exact size for your ad unit via CSS.
Specify an expandable width and a fixed height
You may modify your responsive ad code to specify an expandable width and a fixed height for your ad unit via CSS. The following example shows you how to make these modifications:
<ins class="adsbygoogle"
style="display:block;min-width:400px;max-width:970px;width:100%;height:90px"
data-ad-client="ignored1234567890123456"
data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ignored1234567890123456" crossorigin="anonymous"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
Specify an exact size per screen width
You may modify your responsive ad code to specify the exact size for your ad unit via CSS. The following example shows you how to make these modifications:
<style type="text/css">
.adslot_1 { width: 320px; height: 100px; }
@media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }
@media (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } }
</style>
<ins class="adsbygoogle adslot_1"
style="display:block;"
data-ad-client="ignored1234567890123456"
data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ignored1234567890123456" crossorigin="anonymous"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
@media
rules are a CSS3 syntax, and are supported on all modern browsers. Note that setting the size of the ad unit via CSS in external style sheets is not officially supported.Hiding an ad unit
In certain cases, particularly on smaller mobile devices, you might not want to show an ad at all. If you do want to hide an ad unit, you can set a parameter with CSS media queries so that no ad request is made and no ad is shown. The following example shows you how to make these modifications:
<style type="text/css">
.adslot_1 { display:block; width: 320px; height: 50px; }
@media (max-width: 400px) { .adslot_1 { display: none; } }
@media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }
@media (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } }
</style>
<ins class="adsbygoogle adslot_1"
data-ad-client="ignored1234567890123456"
data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ignored1234567890123456" crossorigin="anonymous"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
In this example, no ads are displayed if the screen width is less than 400px.