Skip to main content

How to Hide AdSense Ads on your Website

By
Google AdSense supports Responsive Ads which means that the size of AdSense ads on your website will automatically change based on the visitor’s device. Thus, if they are viewing your pages on a desktop computer, they may be served the bigger 728×90 leaderboard while the same ad unit may serve a smaller 468×60 banner to visitors who are on a tablet.
There’s no need to change the code as the AdSense script smartly detects the browser’s width and serves the right size accordingly.
Now consider a slightly different scenario where, instead of showing a smaller sized ad, you would like to completely hide the AdSense ad if the screen width is less than ‘n’ pixels. For instance, you may have a 160×600 px Skyscraper unit in your website’s sidebar but it should be displayed only when the site is being viewed on a desktop computer and not on a mobile phone.
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). Let me explain:
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:
Hide AdSense Ads
If you carefully notice the two snippets, you’ll find that we’ve added a new classsidebar_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.

Comments

Post a Comment

Popular posts from this blog

The Best Google Font Combinations That Look Good Together

By
Whether you are creating a website, writing your resume or designing a presentation, the fonts or typeface you choose can make a notable difference. The Google Fonts directory offers a myriad of choices but how do you pick the correct font for your digital projects? Should you go for Serif fonts or Sans Serif or a combination of serifs and sans serifs? Typography is an art and, with thousands of fonts available, it is obviously difficult for non-designers to find that perfect font combination. Need help? Here are some useful font pairing websites where type masters have already done the hard work and all you can do is follow their recommendations to pick the most elegant and gorgeous Google fonts combination for your web and print projects. 1.  Beautiful Web Type  ( hellohappy.org ) – Chad Mazzola has created a beautiful showcase of high-quality typefaces from the Google Fonts website. You’ll discover some creative usage of fonts here though they haven’t updated ...
1 comment
Read more

A Wireless USB Stick that Expands your Phone’s Storage (And a Giveaway)

By
W hat do you do when your mobile phone has limited storage and there’s no option to add an external SD card? How do you carry all your videos and documents where there’s not an iota of space left on the device? Yes, you do have cloud-based services like Dropbox or Google Drive that add virtually unlimited storage to your phone but you’ve to be connected to the Internet to access your files. This week I’ve been testing a wireless USB stick from Sandisk that adds storage to your phones and tablets much like a regular USB drive. To get started, you plug the USB device into your laptop or desktop computer and let it charge for about an hour or two. You can also transfer the files to the stick from the computer through Windows Explorer or Finder on Mac. Once the device is charged, you tap the little power button on the stick to turn it on. Now install the Sandisk Connect app on your mobile phone, go to WiFi settings on your phone and connect to the Wi-Fi hotspot created by the...
Post a Comment
Read more

How to Secure Your Wireless (Wi-Fi) Home Network

By
Wireless Networking (Wi-Fi) has made it so easy for anyone to use Internet on your computer, mobile phones, tablets and other wireless devices anywhere in the house without the clutter of cables. With traditional wired networks, it is extremely difficult for someone to steal your bandwidth but the big problem with wireless signals is that others can access the Internet using your broadband connection even while they are in a neighboring building or sitting in a car that’s parked outside your apartment. This practice, also known as piggybacking, is bad for three reasons: It will increase your monthly Internet bill especially when you have to pay per byte of data transfer. It will decrease your Internet access speed since you are now sharing the same internet connection with other users. It can create a security hazard* as others may hack your computers and access your personal files through your own wireless network. [*] What do the bad guys use  – There ha...
Post a Comment
Read more