APLawrence.com -  Resources for Unix and Linux Systems, Bloggers and the self-employed

Hiding Adsense on narrow screens

© April 2015 Anthony Lawrence


There was a time when this site earned good money from Adsense ads. That was years ago; today it's hard to squeak a hundred dollars a month from it. No big deal - I don't depend upon the Adsense money. It's nice to have something to offset the hosting costs and I'm happy enough to have that.

But when I switched to "responsive design", the Adsense plummeted drastically. What used to be a few dollars a day became one dollar and less - sometimes much less!

I felt there must be something wrong, so I sent email to Adsense support. By the way, you aren't allowed to do that if your Adsense falls below $100 monthly, so if this trend continues I won't be able to get any help from them at all. As I have learned, that hardly matters: Adsense email support is just about useless.

My question was whether I had inadvertantly violated any rule or caused some problem by changing the site layout. I got no answer to that, only the same advice you'll find at Ad placement policies.

What a great job Adsense Support is - just point people at existing documentation. I wonder if it pays well?

I did realize that there might be a problem with the new design as the right side bar gets pushed to the bottom of the screen on narrow devices. Google doesn't like ads there and although I could not get a definitive answer out of the email help, I decided I better fix that. It's not too hard; you just have to hide the ad when the screen is narrow.

Note: you can ONLY hide the new "responsive" ad units. Doing this with other ads is still a violation. See Hiding a responsive ad unit.

Here is what you do:

<style type="text/css">
.adslot_1 { display:inline-block; width: 320px; height: 50px; }
@media (max-width:400px) { .adslot_1 { display: none; } }
@media (min-width:500px) { .adslot_1 { width: 300px; height: 600px; } }
@media (min-width:800px) { .adslot_1 { width: 336px; height: 280px; } }
<!-- responsive -->
<ins class="adsbygoogle adslot_1"
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> 
(adsbygoogle = window.adsbygoogle || []).push({});

That displays a 336 x 280 ad on a normal computer screen, a 300 x 600 on an iPad or similar tablet, and nothing at all on an iPhone or similar screen. I may need to fine tune that as common displays change, but it gives me the flexibility to do whatever I need.

You are adding the tag "adslot_1" to the ad code. Google tends to frown on modifying their code, but they bless this technique.

You can test any url at Screenfly to see how it looks on various devices.

Whether that will fix the low revenue remains to be seen. I should probably consider putting a banner at the top in those cases; that could just be the inverse of this - hiding the banner when the screen is not narrow.

Got something to add? Send me email.

(OLDER)    <- More Stuff -> (NEWER)    (NEWEST)   

Printer Friendly Version

-> Hiding Adsense on narrow screens

Inexpensive and informative Apple related e-books:

iOS 8: A Take Control Crash Course

Take Control of Preview

Photos: A Take Control Crash Course

Take Control of Pages

Take Control of IOS 11

More Articles by © Anthony Lawrence

Printer Friendly Version

Have you tried Searching this site?

This is a Unix/Linux resource website. It contains technical articles about Unix, Linux and general computing related subjects, opinion, news, help files, how-to's, tutorials and more.

Contact us

Printer Friendly Version

The worst crime against working people is a company which fails to operate at a profit. (Samuel Gompers)

Linux posts

Troubleshooting posts

This post tagged:





Unix/Linux Consultants

Skills Tests

Unix/Linux Book Reviews

My Unix/Linux Troubleshooting Book

This site runs on Linode