Remove Yellow Background from Google Adsense Adverts

Microsoft Dynamics 365 Business CentralI’ve been hosting adverts from Google Adsense for a while and, after my last site redesign, I started using responsive adverts which scale according to the size of the browser window (or device size).

Since then, I’ve had yellow background showing either side of the adverts:

Adverts with yellow bars

The other day, I finally had time to track down and fix the issue. The html code for the adverts, which is supplied by Google, places the adverts within an ins tag and a class of adsbygoogle (see two highlighted sections):

...<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
				<!-- azurecurve Responsive Leaderboard -->>
				<ins class="adsbygoogle"
					 style="display:block"
					 data-ad-client="{adsense publisher id}"
					 data-ad-slot="5299901990"
					 data-ad-format="auto"></ins>
				<script>
				(adsbygoogle = window.adsbygoogle || []).push({});
				</script>...

The yellow background is the default colour used by WordPress for ins tags; so to remove it, all you need is a snippet of css in your stylesheet:

ins.adsbygoogle {
	background: transparent;
}

With the css saved, the yellow background disappears:

What should we write about next?

If there is a topic which fits the typical ones of this site, which you would like to see me write about, please use the form, below, to submit your idea.

Your Name

Your Email

Suggested Topic

Suggestion Details

Leave a Reply

Your email address will not be published. Required fields are marked *