Google AdSense has introduced Responsive Ads long back to make sure the Ad gets displayed depending on the screen resolution. For example, when you choose responsive ad, a 728×90 leaderboard ad will be displayed in the desktop version and a smaller 468×60 banner to viewers on a tablet. But what if you completely want to hide the ad?
Below is a way using CSS class to hide Google AdSense on Mobile, as well as Desktop
Hide AdSense Ad on mobile using CSS:
Create a CSS class and use the Media CSS query, considering the width of the screen into account. Here we have created a class “hideonmobile”, which will not display the contents if the screen size is less than 480px.
Add the same class to your AdSense code too. Which will make the code look like this:
<style>
@media (max-width: 480px) {
.hideonmobile {
display: none !important;
}
}
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle hideonmobile"
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 adslot id (data-ad-slot) with your own AdSense IDs.
Hide AdSense Ad on desktop or tablet using CSS:
This is almost similar to the above case. There is only one change that you have to make in order to make it work. Replace the “max-width” in the CSS with “min-width”. This will not display the ad if the screen size if more than 480px.
Here’s the code:
<style>
@media (min-width: 480px) {
.hidedst {
display: none !important;
}
}
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle hidedst"
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>