Responsive web design makes your website fluid and look good across all screen sizes be it desktop, tablets phones or even the Television. Don’t be confused with Responsive and Adaptive designs, both are different. We’re not going to discuss about the differences, let’s concentrate on how to use Google Adsense Ads on Responsive Websites.
If you’re thinking that you may get banned for changing or altering Google Ads, no no …even Google also recommends the responsive design approach for improved indexing since “it keeps your desktop and mobile content on a single URL.”
Responsive Google Ads
If you’re using any responsive web design and you have Google Adsense ads on it, then you will notice that the Ads don’t change their width or adjust as the content does.This is because the Google ads have a fixed width and they will not shrink or expand based on the device size.
For example, if you are using the leader-board 728×90 unit on your website, the ad unit may extend well beyond the screen if someone visits your website on a (320 pixels wide) mobile phone or one of the lower resolution tablets.
Remember to replace the
It is the
window.innerWidth property that is doing all the magic. This property contains the width (in pixels) of the user’s browser window and once you know that value, you can accordingly serve the larger or smaller AdSense ad units. Responsive designs usually use the media screen properties so that the site’s width, content, etc respond to the visitor’s device’s screen. Same logic is applied here.