How To Safely Hide AdSense Ads using "Display:none" ?

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.

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">
.adslot_1 { max-width: 300px; height: auto; margin:10px 0px; }

@media (max-width:99px) { .adslot_1 { display:none; } }

@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! =)

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

14 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. Thanks for the great post! tanx mybloggertricks :)

    ReplyDelete
    Replies
    1. I am so glad you found it useful. Thank you for reading it out :)

      Delete
  2. 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.

    ReplyDelete
    Replies
    1. You are most welcomed dear hafeez. I am sure it will now help you design responsive templates even better. Always a pleasure =)

      Delete
  3. Hello Mohammad,

    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.

    Thanks :)

    ReplyDelete
  4. it is illigal but now a days many bloggers doing it, for better CTR and $ for one time event sites.

    ReplyDelete
    Replies
    1. hi bro this can make google block our adsense or not?

      Delete
  5. i'm not know about html so can you make a video to show me please
    thanks i hope wait for your reply soon :)

    ReplyDelete
  6. 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.

    ReplyDelete
  7. hi
    im not understandig can you make a video please

    ReplyDelete
  8. 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?

    ReplyDelete
  9. if ad serving is disabled to my site and request is also rejected. How can i put ads on my site??? Please reply A.S.A.P

    ReplyDelete
  10. Can you show a video to do it please?

    ReplyDelete
  11. Got the point but i wanted to do that i have button on my website (made by me) saying "Don't show ads" and ads for that visit will be hide and can i use display:none in this case and using responsive ads .....Thanks

    ReplyDelete