Google Adsense now allows you to modify Adsense ad code to meet responsive design requirements. A lot of websites like us have switched to responsive design, which allows the same site design to adjust to varying screens size resolutions (asÂ on mobile device browsers) using CSS. Now even Google recommends you use a responsive design instead of creating a separate mobile site to meet specifications of mobile browsers.
display:none to hide Adsense units at different screens sizes. Even we tried this. Â The Adsense team was listeningÂ … and they advise that using CSS to hide the ad is not a good idea. So now what…
Adsense Code for Responsive Design
Lets say you have a wide 1000px wide single column design and display a large 728px wide banner below the article. Normally your Adsense code looks like this when inserted in html code
The Adsense team officially suggests you use this code to meet the requirements of responsive design, you can modify Adsense code like this.
What this code will do is that when the screen is <750 px, it will switch this to a 468px wide smaller banner, and when the screen size is less than 500px, it displays a mobile 300px wide ad. Amazing!
Remember earlier Google Adsense had helped Adsense publishers modify code forÂ A/B testingÂ to find which ads have higher CTR.Â I think it was a very essential move that Google Adsense officially allowed this code change, as many possible Adsense modification codes were appearing online to fix responsive design issues and webmasters were confused which code to use, just in case it violates Adsense terms of service.Â Â Try this now and improve your responsive web design.