Home » Blogging » How to auto resize adsense based on brower window size?

How to auto resize adsense based on brower window size?

Recently, htpcbeginner.com has been undergoing several visual (and backend) changes, of which on of the change is to auto resize Adense based on browser size. This fall under the topic of responsive Adsense ads, that has come popular in the recent times in an effort to make web more responsive. All this means is adapting your webpages to the browser/device it is being viewed from. For example, if a visitor is using an Android phone, serving a smaller size Adsense ad might be visually better. Other bloggers have written details articles on this topic. The objective of this post is to provide you an example how at htpcBeginner, we recently started to auto resize Adsense based on browser size.

Auto Resize Adsense Based on Browser Size

In our recent efforts to revamp htpcbeginner.com’s design we made several changes, one of which is to switch to the responsive News theme from StudioPress. Since most of our visitors were using a larger screen, we switched from a 960px grid system to a modified 1140px grid system. So if the visitor is using a larger screen/window the webpage would be 1140px wide and if the window is smaller than a 960px wide webpage is presented. With this change we also wanted to take advantage of the extra white space in larger screens by serving larger Adsense ads as show in the pictures below.

Auto Resize Adsense Based on Browser Size
728×90 Ads – Window Width More than 1140px
Auto Resize Adsense based on Browser Size
468×60 Ads – Window Width Less than 1140px

How to Auto Resize Adsense Ads

Turns out, it is extremely easy to auto resize Adsense by modifying the Adsense code block as shown below:


The if statement in the middle decides which google_ad_slot, google_ad_width, and google_ad_height values are used. If the browser window with is less than 1140px then this code would auto resize Adsense ad to 468x60, else, 728x90 ad would be displayed. [ls_content_block slug="recommended-reading-wordpress"] These responsive Adsense ads are approved by Google and do not violate the terms and conditions. So go ahead take advantage of the power of Javascript and auto resize Adsense ads to fit the visitor's screen while also benefiting from it.

We Are Hiring: Familiar with Media Streaming, HTPC, Home Server, Smart Home, and Home Automation topics? Write about it and earn money. No writing experience needed. APPLY HERE.

Get 20% OFF with IPVanish VPN:

♦   Hide your browsing and streaming activity: No logs and no tracking
♦   Access geo-restricted content from anywhere
♦   Encrypt and anonymize: Kodi, Plex, Downloads, Personal Info
♦   Windows, Mac, Linux, Android, iOS, Router, and more.
♦   Money back guarantee - Sign Up Now

About the author

Anand

Anand is a self-learned computer enthusiast, a part-time blogger, and a Food Scientist by career. He has been blogging since 2010 on Linux, Ubuntu, Home/Media/File Servers, Smart Home Automation, and related HOW-TOs on htpcbeginner.com and smarthomebeginner.com.

Archives

Join the other 110,000 followers