In this tutorial we will share how you can set a parameter with CSS media queries for smaller mobile devices so that no ad request is made and no ad is shown. We have applied it on our blog and have set ads not to display on small screens.
Isn't it illegal To Hide AdSense Ads?
Yes it is but only for synchronous ads but not for asynchronous which is the new code AdSense creates to render responsive ads on your blogger blog or website.
The official support site of Google says that it allows publishers to modify the Ad by hiding it using CSS3 Media queries for responsive Ad units (asynchronous) only but it disallows it for synchronous ads. Here is the block quote for verification:
Techniques to avoid
Here are some techniques you�ll want to avoid:
- Hiding ad units at anytime (e.g., display:none), unless you're implementing a responsive ad unit.
- Implementing AdSense ad code in a way that covers content
- Using any means to force the display of more than three AdSense ad units on a page
- Manipulating the ad targeting using hidden keywords, IFRAMEs, or any other method
- Distributing ads in emails or software
- Floating ads or units that slide to attract unwarranted attention
Google has suggested itself the technique of using display:none on one of its support page
If you want to only show ads for certain screen sizes you can use CSS to accomplish this. The following example shows you how to modify your ad code to use CSS3 media queries to hide ads for specific screen sizes..
Now when we have learnt that the method of using CSS display:none is completely Safe, allowed and legal, we can then proceed towards our tutorial.
Hide AdSense Responsive ADs
I assume that you have read our tutorial on creating responsive ad units, if not kindly read it first
You just need to make a slight modification to the CSS code of your ad code and mention on which Screen Size would you like to hide displaying ads. All code is same that we shared earlier except the yellow highlighted section
<style type="text/css">
@media (max-width:99px) { .adslot_1 { display:none; } }
.adslot_1 { max-width: 300px; height: auto; margin:10px 0px; }
@media (min-width:100px) { .adslot_1 { width:125px; height:125px; } }
@media (min-width:180px) { .adslot_1 { width:180px; height:150px; } }
@media (min-width:200px) { .adslot_1 { width:200px; height:200px; } }
@media (min-width:250px) { .adslot_1 { width:250px; height:250px; } }
@media (min-width:300px) { .adslot_1 { width:300px; height:600px; } }
@media (min-width:336px) { .adslot_1 { width:336px; height:280px; } }
@media (min-width:468px) { .adslot_1 { width:468px; height:60px; } }
@media (min-width:728px) { .adslot_1 { width:728px; height:90px; } }</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle adslot_1"
style="display:inline-block;"
data-ad-client="xxxxxxx"
data-ad-slot="xxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
The above code has no changes except the yellow highlighted section where I have set ads not to display for screen sizes less than 99px. For sizes greater than 99px, ads will display normally. I have chosen 99px because normally all smart phones today have a wider screen size and day by day screen sizes are getting bigger except for some old sets which have an extremely small size and it makes no sense displaying ads on smaller screen sizes.
Hiding them will block the ad from rendering and loading. The JavaScript will not load this time unlike in synchronous where the JS still loads despite setting display:none. This is one extra benefit of using async codes. So you are not actually setting Ads to not show or disappear you are actually telling AdSense not to load Ads for a specific screen size.
You can also set a custom width to hide ads on a specific screen size. Suppose you wish to Hide ADs on a screen size between 250px but wish to display it for other screen sizes so you will edit the code as shown below
PS: I am just sharing the CSS code here for simplicity:
<style type="text/css">
.adslot_1 { max-width: 300px; height: auto; margin:10px 0px; }@media (min-width:100px) { .adslot_1 { width:125px; height:125px; display:block; } }
@media (min-width:180px) { .adslot_1 { width:180px; height:150px; display:block; } }
@media (min-width:200px) { .adslot_1 { width:200px; height:200px; display:block; } }
@media (max-width:250px) { .adslot_1 { display:none; } }
@media (min-width:300px) { .adslot_1 { width:300px; height:600px; } }
@media (min-width:336px) { .adslot_1 { width:336px; height:280px; } }
@media (min-width:468px) { .adslot_1 { width:468px; height:60px; } }
@media (min-width:728px) { .adslot_1 { width:728px; height:90px; } }</style>
The code above will hide ads for a screen size 250px or less than 250px but will show ads for 200px, 180px and 100px or for screen sizes greater than 250px.
Note that we are using max-width to hide ads and not min-width condition. This is important because Ads are hidden and no AD request is made only when you use the max-width condition.
That's it!
Need Help?
Hope this tutorial may help you understand how to better control the display of Ads on your web pages. I am open for as many questions as you may wish to ask. Feel free to post your queries in the comment box below.
Peace and blessings buddies! =)