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 the specifications of mobile browsers!
So how will 728px wide banner ads look when the screen size is 500px – it will cause horizontal scrolling and will ruin your responsive mobile design experience.
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
Let us 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 about which code to use, just in case, it violates Adsense terms of service. Try this now and improve your responsive web design.