How to Hide AdSense Ads on your Website

There are two ways to achieve this. You can either write a CSS media query that will completely hide the sidebar on a mobile phone and thus the included AdSense ad will also be hidden from the visitor. This will however be against AdSense program policies because the AdSense ad will still be rendered on the visitor’s screen though hidden from view.

How to Hide AdSense Ads with CSS Media Queries

What we therefore need is a mechanism where the the AdSense ad is itself ‘blocked’ from rendering on a small screen. This is also possible with CSS media queries but the big difference is that we need to apply the CSS rules to the ad element and not the parent container (which in our case is the sidebar). in explaination :

What you see above is a standard AdSense code snippet that will render a 160×600 pixels ad unit. The size (height and width) of the ad is specified as an inline style.

If you copy-paste the above ad unit as is into your website, it will always download and render the ad irrespective of the visitor’s screen size. If you however need to prevent the AdSense ad from showing on small screens, we need to make a few “officially permitted” changes to the default code.

The modified code will look something like this:

If you carefully notice the two snippets, you’ll find that we’ve added a new class sidebar_ads (you can give it any name) to the default AdSense snippet. Next we’ve added a media query that will hide all elements of this class if the screen width is less than 480 pixels. That’t it.

With this approach, no ad requests is made to the Google server and thus no ad is shown to the visitor. The ad area will be hidden and the content below will get pushed up leaving no whitespace, just as you’d like it to be.