How to Hide adsense ads on your website

How to Hid Adsnes ads on your website
Google adsense suppots responsive ads which means that the size of adsnes ads on your website will automatically change based on te visitor’s device. Thus, if they are viewing your pages on a desktop computer, they may be served the bigger leaderboard while the same ad uit may serve a smaller banner to visiors wo are on a tablet.

How to Hide Adsense Ads on your website.
There is noe need to change the code as the adsense script smartly detects the browser’s width and serves the right size accordingly.

Now consider a lightly different scenario where, instead of showing a smaller sized ad, you would like to completely hid the adsense ad if the screen width is leess than n pixels. For instance, you may have a px Skyscraper unit in your website’s sidebar but it shoud be displayed only when the site is being viewed on a desktop computer and not on a mobile pone.

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

How to Hide Adsense ads with CSS media queries
What we therefore need is a mechanism wher e 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. Let me explain.

What you see above is a standard Adsense code snippet that will render a pixels ad unit. The size 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 downlad and render the ad inrrespective 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 will fine that we have added a new class sidebar_ads you can give it any name to the default adsense snippet. next we have added a media query that will hid all elements of this class if the screen width is less than 480 pixles. That’s 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 hideen and the content below will get pushed up leaving no whitespace, just as you’d like it to be.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s