CODEWITHSUNDEEP
htmlcssjquery-mobilemobileadsense
user2334436
user2334436

Reputation: 939

Displaying an adsense ad on desktops only and hiding it on mobiles

I created this AdSense ad and used position: relative to place it. I just need this ad to be show on desktops and not mobiles. However, at this point the ad is also being displayed on mobiles too, and since I used “position: relative” its being displayed out of boarder. Any ideas on how can I just show this ad on desktops and hide it on mobiles? Thanks.

<div style="position: relative; left: 700px; top:-100; ">

<style>
.test-ad { width: 728px; height: 90px; }
@media(min-width: 500px) { .test-ad { display: none; } }
@media(min-width: 800px) { .test-ad { width: 728px; height: 90px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- test-ad -->
<ins class="adsbygoogle test-ad"
     style="display:inline-block"
     data-ad-client="XXXXXXXXXX"
     data-ad-slot="XXXXXXXXXXX"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

</div>

Upvotes: 0

Views: 284

Answers (2)

Garry
Garry

Reputation: 4533

Check if user agent is mobile browser then don't display them. You can use WURFL.js api for user agent detection.

Add this:

<script type='text/javascript' src="//wurfl.io/wurfl.js"></script>

And use this:

<script>
if(!WURFL.is_mobile){
      //display ads
}
</script>

Please note that in free you can only use 5 capabilities of WURFL, please check site for more details.

Upvotes: 1

lucian
lucian

Reputation: 681

min-width: 500px is too high for all but very few mobile phones, it's tablet territory. Keep in mind that although the resolution may be quite high, the so-called viewport (the browsing resolution) is smaller by a factor of 1,5x, 2x or even 3x. Most phones have a viewports width of 320 or 360 (even full hds may be just 640x360, with 3x3 real pixels per browser pixel). To put it simple, max-width: 500px should do it

Upvotes: 0

Related Questions