How To Hide/Display Adsense Ads In Desktop & Mobile Depending On Screen Size?

In google adsense, you will see many options to select an ad type. Google adsense introduced responsive type of ad, ad displayed on the websites according to the resolution of screen. For an example if you choose 728x90 leaderboard ad type, ad will displayed in the pc version and another resolution banner ad 468x60 will display on tablets. But what if you get the option to hide ads only on one device?

Many people asked me so many questions like "How to display Adsense ads only on mobile device?" how to display ads only on Pc or desktop? & how to display ads of adsense on both pc and mobile?. I'm going to share the solution of this problem. Few months back I had the same situation to display adsense ads. hope this will solve your most of the problems probably. 

Different Ways to Solve This Issue:

You can solve this issue in different ways. You can go for wordpress plugins or  custom script.

By using Wordpress Plugin:

There are different types of many plugins which will solve this problem. I gonna tell you some important plugins which I have used them in few days back on my blog. You don't need any technical knowledge to work with, they are easy to use and are very effective. Ad Inserter & Advanced Ads these are the two plugins which i have personally used. 

Using CSS Media Query:

If you are know HTML & CSS, this will be a piece of pizza. If you don't know its ohk I'll make you understand how it really works.

If you want to create a new ad, here's the script below:

<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-7525498198"
 data-ad-slot="6727986783"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Display Adsense Ads Only on Desktop & Tablet:

By this code you can hide your adsense ad in mobile but can display on desktop & tablets.

Use Media CSS query and create a CSS class, consider the screen width into account. I have created a class name "hidead" which will not display adsense ad contents if the screen resolution is less than 480px.

<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>

Display Ads Only on Mobiles:

Put the same class into your adsense code. After adding this class, your code will look like this: 

Now replace the maximum width in CSS with Minimum width. This will not display adsense ad contents if the screen resolution is more than 480px.

<style>

@media (min-width: 480px) {
.hidead {

}
display: none !important;
}

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



style="display:inline-block;width:336px;height:280px"
<ins class="adsbygoogle hidead"

data-ad-slot="6727986789"></ins>
data-ad-client="ca-pub-7525498198"
<script>

</script>

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

Use Custom Script to Hide Ad in Mobile:

The ad code is mostly the same, the variable is used here (td_screen_width) which defines the screen width. According to your requirement write the if condition to display the ad code.

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script type="text/javascript">
var td_screen_width = document.body.clientWidth;


document.write('<ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-75254981981XXXXX" data-ad-slot="2626813281"></ins>');
if ( td_screen_width >= 468 ) {
 /* large monitors */
 (adsbygoogle = window.adsbygoogle || []).push({});
 }

</script>

Use Custom Script to Hide Ad in Desktop & Tablet:

Again the code is similar to the last code but you need to do just simple thing that is change the value inside the if condition.

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script type="text/javascript">
var td_screen_width = document.body.clientWidth;


document.write('<ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-75254981981XXXXX" data-ad-slot="4971251185"></ins>');
if ( td_screen_width < 468 ) {
 /* Phones */
 (adsbygoogle = window.adsbygoogle || []).push({});
 }

</script>

Use Two Different Types of Adsense Ad Code for Both Mobile & Desktop:

You can use two different types of adsense ad code for both mobile & desktop in the same location. Check the code shown below:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script type="text/javascript">
var td_screen_width = document.body.clientWidth;


/* large monitors */
if ( td_screen_width >= 468 ) {

document.write('<ins class="adsbygoogle" style="display:inline-block;width:468px;height:15px" data-ad-client="ca-pub-75254981981XXXXX" data-ad-slot="3494921416"></ins>');
(adsbygoogle = window.adsbygoogle || []).push({});
                    }
                
                    if ( td_screen_width < 468 ) {
                        /* Phones */

(adsbygoogle = window.adsbygoogle || []).push({});
document.write('<ins class="adsbygoogle" style="display:inline-block;width:200px;height:90px" data-ad-client="ca-pub-75254981981XXXXX" data-ad-slot="4972194885"></ins>');
                    }

</script>

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