There are several approaches to show different content depending on device size. My favorite is to do it with a Media Query [w3schools.com] that calls some DIVs and not other DIVs by screen size.

An example of that would be to have the code posted above placed in a div class which is a part of the overall css and add that div class to the media query section pertaining to tablet or smaller with the property of "display: none;"

The CSS for the "ads" class div would be similar to:

div.ads
{
margin: .4em;
padding: .3em;
text-align: center;
display: block;
}

@media only screen and (max-width: 767px) {

.ads {
display: none; }
}

The HTML would be similar to:

<div class="ads">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Responsive links -->
<ins class="adsbygoogle"
 style="display:block"
 data-ad-client="ca-pub-********************"
 data-ad-slot="***************"
 data-ad-format="link"
 data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

It is preferable to use the code given for Hiding an Ad Unit at [support.google.com...] to do this.
This is similar to the example above but the ´hidden’ class is applied within the google Adsense code, I am pretty sure google have said this is the only authorized method, since otherwise they do not know an ad is hidden and will still think an ad is being shown...

otherwise they do not know an ad is hidden and will still think an ad is being shown

Google knows exactly what ads display and what ads do not display.

I agree with Rasputin, I just posted the example in case that was what Nazhahp was wanting to do. The best reason not to use that method is that "display: none;" will not display the contents of that div, but it will likely load it anyway.

In other discussions here, using the CSS "display: none;" to hide an image from small screens still downloads the image although it is not viewable. The only way to be certain that the script is not executed is to follow the instructions in Rasputin's post.

Agreements aside, when I run a page I've made through Google's speed test then compare desktop with the smart phone, there are different ads. That shows which ads Google sees.

You can still style your div with display:none if you like but it is not needed.

Yes, Adsense knows if a div is hidden or not, the same way it computes the size of the available space to select which ad to display (responsive).

Alternatively you can also do this :

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Responsive links -->
<script>
if(screen.width>728)
{
 document.write('<ins class="adsbygoogle" ');
 document.write('style="display:block" ');
 document.write('data-ad-client="ca-pub-********************" ');
 document.write('data-ad-slot="***************" ');
 document.write('data-ad-format="link" ');
 document.write('data-full-width-responsive="true"></ins>');
 (adsbygoogle = window.adsbygoogle || []).push({});
}
</script>

Just inspect the rendered page and you should see the following comment inside adsense 'ins' tag if you've implemented it correctly;

<!--No ad requested because of display:none on the adsbygoogle tag-->

Thank you guys for all tips and help!

The only way to be certain that the script is not executed is to follow the instructions in Rasputin's post.

Not the only way, there are many ways not to load the ad. Yes, your example will load the ad, just not display it. Actually that's fine as I said, but there are ways that give you more control. The Google example does not give the site owner any control.

Media Query combined with SSI to display styled Divs containing the ad code is the best option to control where, how & to whom the ad is loaded and displayed. Which ad type, loaded for what size screen, to what visitor, etc...

I exactly did what you said, i used the given code on google support to hide the code on small devices.. Thank you for you suggestion and help!

@Raputin, Could you please confirm that the code i have just implemented works fine and doesn't break their TOS.

<style type="text/css">
.adslot_1 { display:inline-block; width: 320px; height: 50px; }
@media (max-width: 400px) { .adslot_1 { display: none; } }
@media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }
@media (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } }
</style>
<ins class="adsbygoogle adslot_1"
 data-ad-client="ca-pub-***************"
 data-ad-slot="************"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

Kind regards!

Looks good to me.
Personally I also remove the line
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
from each individual ad unit and just add it once at the top of the page (an approved modification) but of course you don’t have to do that.
Cheers

Thank you SO MUCH!

Cheers!

Hi again!

@Rasputin, I followed your recommendation to use google's code to hide the ad on smile devices, it works fine, but it displays in other mobile phones as Iphone 6 plus and other devices with a display of 414 * 736 plus tablets.

I would like to display the ad only on big screens since it is an "ad link unit" to prevent accidental clicks while visitors scrolling down.

what do you think of Dimitri's code ?

can you help me ?


Kind regards!

Looks like all you would need to do is edit the code. If the code you posted previously is what you are using, just change this line:

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

to this:

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

that sets your ad script to "display: none;" for devices up to 415px width rather than the 400px width which was posted.

And if you're putting all those spaces into your stylesheet, you can use a text editor to remove that superfluous space & significantly condense the file for faster loading.

@not2easy
Thank you so so much for your help!

@keyplyr I don't know how to that !

Nazhahp..look / search for "minify"..there are many online tools that will do it, and some text editors that you can install can do it "offline"..
Or you can do it manually.

I'm not sure that moving the AdSense-only css away from their script is the ideal way to use it. If AdSense is instructing people to hide visibility using this method, it may be best to use it as AdSense presents it.

I didn't suggest moving it, although that works too.

Thank you guys for all your help and recommendations. I do have another question, Hope i get the answer.

I took the code provided by adsense support to hide ads on small devices and played around it little bit whereby i can use it hide code on dekstop and display it on small devices. I don't have enough knowledge to confirm if the code is safe and respect their TOS. what do you think ?

<style type="text/css">
.adslot_1 { display:inline-block; width: 320px; height: 90px; }
@media (max-width: 800px) { .adslot_1 { display: none; } }
@media (min-width:500px) { .adslot_1 { display: none; } }
@media (min-width:400px) { .adslot_1 { width: 300px; height: 200px; } }
</style>
<ins class="adsbygoogle adslot_1"
 data-ad-client="ca-pub-1234"
 data-ad-slot="5678"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

Thank you so much in advance!