Want to remove yellow border / background around Adsense Ads? We all know that Google can insert smaller size ads in bigger ad units if the Adsense smart algorithm decides that it will be a higher paying ad.
We advised that it is in fact better to use 336×280 ad units than a 300×250 ad units as it will lead to higher paying ads. But when the smaller rectangle units display in the larger ad units, a clear area should appear around the smaller ads, but users of popular themes like Twenty Thirteen, you get a yellow border, which reduces the Adsense CTR and earns lesser money.
Why Adsense Yellow Border?
As you see the screenshot, we use the default Twenty Thirteen theme and notice a yellow border around the Adsense ads. If you use the aynchronous Adsense code, then you will note that the tags are inserted in the ‘ins’ code.
<ins class="adsbygoogle responsive-a"
style="display:inline-block"
data-ad-client="ca-pub-123445"
data-ad-slot="12345"></ins>
And if you see the Twenty Thirteen default CSS file, they put a yellow background (color #fff9c0 to be more exact) to style the ins tags.
ins {
background: #fff9c0;
border: none;
color: #333;
text-decoration:none;
} So while the yellow border does not display when the ad unit shows full size, but whenever a smaller ad unit displays, the yellow box appears. I am not sure where else the ins tags appear, but is a design element that the theme designers will need to fix, possibly in a later version.
Remove Adsense Yellow Border
Its easy to remove the yellow border with a simple addition to the CSS file in your theme.
.adsbygoogle {
background: #FFF;
}We basically add a white background (#FFF) here and style the class .adsbygoogle rather than the ins tags which might actually need that yellow background color somewhere. You can change the background to whatever color your background is.
Reload the page, empty the cache and your Adsense yellow border is gone!