How To Safely Hide AdSense Ads using "Display:none" ?
AdSense new policy allows publishers to only hide Responsive Ads using CSS media queries. You can choose to control the display of your Ad visibility on different mobile devices. You can now choose when to show or hide an ad unit. All these is now possible thanks to the Responsive Ad units. We recently shared a tutorial on how to create responsive ad spots and how to stop AdSense from serving blank space on Responsive ad units by fixing the blank space error. Today we will take a step ahead and share the trick of hiding AdSense Ads on any screen size you want using simply CSS "Display:none" property. Note that Google only allows you to hide the content using the CSS property of display and it does not yet allow using "visibility:hidden" property so we will only follow techniques which goes in accordance with AdSense Program policies. Sites which are hiding the AD code using "visibility hidden" are surely not following recommended methods and pose a serious thread to your accounts so always follow authentic methods to manage your monetization strategies.
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.
Hiding ad units at anytime (e.g., display:none), unless you're implementing a responsive ad unit.
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.
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.
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.
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.
Thanks Muhammad for sharing this great news, I was much confused about this, because i knew that google policy does not allow us to hide adsense with display:none; property. so i was thinking how to resolve the issue to make it hidden on smaller screens...but now you cleared all the things. thanks bundles.
Thanks for sharing this amazing article. But i am little bit confused. I am using media queries to hide full sidebar for all screen sizes below tablet and sidebar which includes adsense ad unit also on Safe Tricks.
Please check out is it safe to use ? or need to do changes ? I am using ad unit of 300*600 of Asyc ad code.
it is illigal but now a days many bloggers doing it, for better CTR and $ for one time event sites.
hi bro this can make google block our adsense or not?
heard some web sit this will make google block adsense and site dose it truth or not please clear description i will back to your site again if this helpfull i will share to my friends to your site thanks again.
good Article I am planning to have different set of ads for mobile users . for example if i use display : none to hide ad in sidebar and media queries to show another one inside the post.does this safe to use?
Can you show a video to do it please?