I was pretty excited when I realized that Google AdSense was offering responsive sized ads. Kinda surprised it took me so long to notice it, but I’m not exactly raking in insane amounts of AdSense dollars at the moment.
Their Smart Sizing option is very convenient in that it will automatically detect the container elements width and then serve up an appropriate add based on that. While this is really slick and convenient I was getting much too tall ads due to the layout of my blog.
Luckily they do offer an Advanced mode, where you can modify some CSS Media Queries to request specific sized ads based on browser width. This was perfect.
In my case I wanted 3 sizes.
- mobile devices (320px x 50px ad)
- browsers with widths over 1400px (300px x 250px ad)
- browsers with width under 1400px (120px x 240px ad)
So, I just adjusted the CSS Media Queries as such, and all seems to be working pretty well.
1 2 3 4 | .my-ad { width: 320px; height: 50px; } @media(min-width: 500px) { .my-ad { width: 320px; height: 50px; } } @media(min-width: 800px) { .my-ad { width: 120px; height: 240px; } } @media(min-width: 1400px) { .my-ad { width: 320px; height: 250px; } } |