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:
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.
No comments:
Post a Comment