How To Hide or Display Different Adsense Ads In Desktop & Mobile Depending On Screen Resolution

Google AdSense has already introduced Responsive Ad Units a Long Back to making sure that Ads get displayed depending on the Screen Resolution.In this way, a 728*90 Ad will be shown in the Desktop version and Similarly 468*60 Ad will be shown in Tablet devices.Those changes are made depending on the Screen Resolution of the Particular Device you are using to view the Website.

Now, What if you want to Completely Hide the Ad? When I was going through an AdSesne related Forum, I saw many people are asking “How to display AdSense ad only on desktop?”, “How to display AdSense ad only on Mobile?”, or “How to display different ads in desktop and mobile?”.I have also faced this problem a long ago, Now I have come up with a new Solution for Hiding or Display Particular Ads in Particular Devices like Desktop, Tablet or Mobile.

There are different methods to solve this issue, If you are a Self Hosted WordPress User then, there are many Plugins available to do this Task, If you are using any other platform then you will have to play with some codes.

WordPress Plugins

If you are a Self Hosted WordPress user then you can use below listed Plugins to make your Work Easier.You can Install any of the below-given Plugin and Start making use of this trick.

Using CSS and HTML

If you have some Basic knowledge of CSS and HTML, then you can easily apply this trick, or even if you don’t know anything about it, I will help you to do it yourself.
Example of an AdSense Ad Script:

script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle"

style="display:inline-block;width:336px;height:280px"

data-ad-client="ca-pub-75XXXXXXXXXXXXXX"

data-ad-slot="67279867XX"></ins>

<script>

(adsbygoogle = window.adsbygoogle || []).push({});

</script>

Hide AdSense Ad on Mobile:

By making simple changes in the above code, we can Hide Ads in mobile Devices easily.In this Code, I have created a class “hidead”, which will not display Ads if the screen size is less than 480px.
Add the same class to your AdSense code also  Which will make the code look something like this:
<style>
@media (max-width: 480px) {
.hidead {
display: none !important;
}
}
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle hidead"
style="display:inline-block;width:336px;height:280px"
data-ad-client="ca-pub-7525498198"
data-ad-slot="6727986789"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Note: Replace the publisher id(data-ad-client) and ad slot id(data-ad-slot) with your own AdSense IDs

Hide Ads on Desktop or Tablet Devices:

There is only one change we want to make on the Above code inorder to make it work.Replace the “max-width” in the CSS to “min-width”. Applying this code, will not show Ads on Screen Size more than 480px.

<style>
@media (min-width: 480px) {
.hidead {
display: none !important;
}
}
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle hidead"

style="display:inline-block;width:336px;height:280px"

data-ad-client="ca-pub-7525498198"

data-ad-slot="6727986789"></ins>

<script>

(adsbygoogle = window.adsbygoogle || []).push({});

</script>
Note: Replace the publisher id(data-ad-client) and ad slot id(data-ad-slot) with your own AdSense IDs

Hide Ad in Mobile using Custom Script:

This code is also similar to the above one, But we are adding a variable (td_screen_width) which actually defines the Screen Width.
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script type="text/javascript">
var td_screen_width = document.body.clientWidth;
if ( td_screen_width >= 468 ) {
/* large monitors */
document.write('<ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-7525498198" data-ad-slot="6727986789"></ins>');
(adsbygoogle = window.adsbygoogle || []).push({});
}
</script>
Note: Replace the publisher id(data-ad-client) and ad slot id(data-ad-slot) with your own AdSense IDs

Hide Ads in Desktop or Tablet using Custom Script:

Again this Ad code is also similar to the above one, All we want to do is to make a simple change in the value inside the condition.
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script type="text/javascript">
var td_screen_width = document.body.clientWidth;
if ( td_screen_width < 468 ) {
/* Phones */
document.write('<ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-7525498198" data-ad-slot="6727986789"></ins>');
(adsbygoogle = window.adsbygoogle || []).push({});
}
</script>

Note: Replace the publisher id(data-ad-client) and ad slot id(data-ad-slot) with your own AdSense IDs.

Use different Ads for mobile and desktop in the same location:

Using this code, you can use 2 Different Ads for Desktop and Mobile Devices on the same location.
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <script type="text/javascript"> var td_screen_width = document.body.clientWidth; if ( td_screen_width >= 468 ) { /* large monitors */ document.write('<ins class="adsbygoogle" style="display:inline-block;width:468px;height:15px" data-ad-client="ca-pub-7525498198" data-ad-slot="6727986789"></ins>'); (adsbygoogle = window.adsbygoogle || []).push({}); } if ( td_screen_width < 468 ) { /* Phones */ document.write('<ins class="adsbygoogle" style="display:inline-block;width:200px;height:90px" data-ad-client="ca-pub-7525498198" data-ad-slot="6727986789"></ins>'); (adsbygoogle = window.adsbygoogle || []).push({}); } </script>
Note: Replace the publisher id(data-ad-client) and ad slot id(data-ad-slot) with your own AdSense IDs.
Implementing the above codes will help you in almost all Cases.Let me know if you are still having any more doubts, in Comment Section below-below and We will get you back at the Soonest.

About Astro Joseph

Hi, I'm Astro Joseph the founder and CEO of IPEE World and IPEE Network.I started this blog for a passion and it is now empowering millions of readers around the globe.Read more about me at About and Contact page.

Leave a Reply

Your email address will not be published. Required fields are marked *