Adsense responsive ads ignore or override css styles
I had some trouble getting adsense responsive ads to respond to css styling. I thought it might be helpful to share my experience because I could not find anyone else with the same problem. I tried to follow the instructions here but I found the ads would still exceed the height I configured. My code looked something like this:
| <style> | |
| .responsive_ad { width: 320px; height: 100px; } | |
| @media(min-width: 500px) { .responsive_ad { width: 468px; height: 60px; } } | |
| @media(min-width: 800px) { .responsive_ad { width: 728px; height: 90px; } } | |
| </style> | |
| <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> | |
| <ins class="adsbygoogle responsive_ad" | |
| style="display:block" | |
| data-ad-client="ca-pub-XXX" | |
| data-ad-slot="1234" | |
| data-ad-format="auto" | |
| data-full-width-responsive="true"></ins> | |
| <script> | |
| (adsbygoogle = window.adsbygoogle || []).push({}); | |
| </script> |
The script and html was taken from my adsense account and I only added the responsive_ad class to the ins. If you look closely you will notice two subtle differences between my html and the example given by adsense. data-full-width-responsive="true" and data-ad-format="auto" were only present in my version. I expected data-full-width-responsive to override the width but it appears to override the height as well. ad-format is only needed if you aren't providing your own sizes. Removing these two attribute makes it work as expected. The ads now honour the css height and width.
References:
Comments