Whenever you first implant the code or change the layout settings of your site, it takes about a day for their system to adjust the code to better serve the cleanliness and neatness of the ads that appear. For example, upon first implanting the auto ads code for this site and others, the margins were off in the ads just below the header. The horizontal ad would appear just below the header, but with a margin too thick (between 2 – 4em of extra space: top and bottom).
Google has this information about how their auto ads work:
Making a CSS hack
I initially compensated for this in my Astra Child Theme by shortening the container-top of my page content. This fixed the bottom margin of the ad by enabling viewers to see the top-half of the blog content upon loading the page. However, the margin was still too thick just below the header.
Nevertheless, within a day it magically fixed itself. Google’s artificial intelligence of the auto ads system detected the width of the margins above and below the header ad, and shortened it. The ads then appeared with a clean, small margin (about 1-2em) below the header.
Then, this happened
Yesterday, I tweaked my theme from the CPANEL by replacing the child theme. The logo disappeared after re-uploading a new child theme because the contents are stored on another .php file in the parent. This altered the appearance of the header ad. It showed up within the header just below the menu and site identity content, which made the header width abnormally thick.
Not that it’s that bad, but it would be nice if I had full control over exactly where I place ads. Certainly, I could hack this again by changing the header to ‘transparent,’ removing the 1 pixel border line, and changing the color to that of the page. This would make the ad look cleaner in perspective as being ‘between’ the header and site content.
Further, on my other site, https://blog.flexiblevenus.com, this also happened. The weird thing was the ad would even appear ‘vertically’ within the header between the menu (on right) and site identity (on left). This would make the header MUCH too wide—after loading the page the header would take up two-thirds of the page to where you couldn’t see the content!
Here is an example from my fife music site. I just implanted the Adsense code today, so it will take a day or so for Google’s bots to adjust.
Moreover, what made Flexible Venus Blog worse was the ‘sticky’ header that I had in place at the time. Imagine for a moment, you load this page with this weird vertical ad placed in the center of the header. The site content can hardly be seen. Then when you scroll down to see the page, the header ‘follows’ you because it’s sticky. You only have a small area on the bottom of your screen to see the page content. Not very good.
However, this too fixed itself after a day or so once the Adsense Auto Ads system detected the placement of the ad in relation to the site layout. The lesson I learned from this experience was to be patient.
At present, I am dealing with my header width stretched due to the current auto ad placement. Oh well, I shall wait another day to see if this fixes on its own. I will update you soon either on this blog entry or another one.
[UPDATE] Later this afternoon
Sure enough, the auto ads code detected the margin width and placement of its ads in the header section and adjusted accordingly. The beautiful horizontal ads no longer display in the header, but are instead nicely sandwiched between the container and header. It was 1415 this afternoon when I noticed the change upon visiting the site.
Google’s technology is quite fascinating. I am pleased. The appearance of a website is so important these days, not only for your readers’ satisfaction but also for yourself. No one likes unkept virtual structure, at least not me. If you enjoyed reading this article, have questions or would like to share your experiences, leave a comment below. Also feel free to share this post.