How to Hide AdSense Ads on your Website

H
Published in: Google AdSense

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 728x90 leaderboard while the same ad unit may serve a smaller 468x60 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 160x600 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:

AdSense Ad Code

What you see above is a standard AdSense code snippet that will render a 160x600 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 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.

📮  Subscribe to our Email Newsletter for Google tips and tutorials!
Published in: Google AdSense

Looking for something? Find here!

Meet the Author

Web Geek, Google Developer Expert
A
Amit Agarwal

Amit Agarwal is a Google Developer Expert in Google Workspace and Google Apps Script. He holds an engineering degree in Computer Science (I.I.T.) and is the first professional blogger in India. He is the developer of Mail Merge for Gmail and Document Studio. Read more on Lifehacker and YourStory

Get in touch

Google Add-ons

Do more with your Gmail and GSuite account
G

We build bespoke solutions that use the capabilities and the features of Google Workspace for automating business processes and driving work productivity.

  1. Mail Merge with Attachments
    Send personalized email to your Google Contact with a Google Sheet and Gmail
  2. Save Emails and Attachments
    Download email messages and file attachments from Gmail to your Google Drive
  3. Google Forms Email Notifications
    Send email notifications to multiple people when a new Google Form is submitted
  4. Document Studio
    Create beautiful pixel perfect documents merging data from Google Sheets and Google Forms
  5. Creator Studio for Google Slides
    Turn your Google Slides presentations into animated GIFs and videos for uploading to YouTube