Google Adsense banner not properly aligned when inserted at top of "Frame" div

[Sono]

So another issue with responsive Google Adsense banners: when I insert it to the top of the "Frame" div, that is actually the content area in the default theme,  and set the banner to be aligned centered, it almost always appears off centered to the right. See the attachment (desktop.jpg). I thought it is a Google glitch again, but I tried inserting the code to my mobile theme that is totally different than the default, this time, to the footer, and tadaam, the centering works (see attachment "mobile.jpg). It is the exact same code. So it made me think maybe at the top of the frame div, there is a property that confuses the Adsense script thinking that its parent is wider than it actually is. I have inspected  the default theme code, and noticed that for the div with class="Frame", that is actually the forum content area, only the right padding is defined, no left paddig. That's why I have the suspicion that maybe this confuses the Google script. Maybe it excludes the padding, and when it tries to grab the size and position, it aligns everything to the right, imporperly, or I don't know... But no other element in the content area has assimmetric properties on the sides, only the Frame. All others have equally sized margins and paddings. Any idea to overcome this? You see in the mobile where the footer has no assimmetric side properties, the Google script works fine.

[Aleksi "Lex" Kilpinen]

Not really sure what you mean, that screenshot seems pretty perfectly centered to me.

[Sono]

Check it once more. I know it is not the best example but I couldn't load a better one this time. Check the position compared to the line below the banner. You can see the left side of the banner is farther from the end of the line than the right end.

[Aleksi "Lex" Kilpinen]

Except, you can't really see where the banner starts, or ends, so that's a bit difficult to judge from a screenshot.

[Sono]

Ok, here is it with Chrome inspector. You can see now. Compare the banner area to the line. When a banner loads that has border, the error is very visible. And the position wanders all the time. Sometime a banner is more to the right, sometimes it is not that much. But different banners are differently off centered, but never centerd.

[Aleksi "Lex" Kilpinen]

Right, now I can see that small discrepancy there, without knowing exactly what theme you are using, and the code you are using to insert the ad - it's a bit difficult to comment though.
In general, responsive ads can be a pain to get right sometimes.

[Sono]

It doesn't matter what I use, because the divs have the same property in that area like in the default theme. Check this forum for example. You can see here there is that assimmetric padding as well. My forum is the same, just the colors are different in that area.

Check the photo I attached. You can see that that the "content_section" div is also assimmetric.

What if I define simmetric paddings for the "content_section" and "frame'" divs? Why are they assimmetric? Will it affect something important in the appearance? They are like that in the default theme, so the SMF creators should know why it is assimmetric.

[gecitli]

Hello if you want give this a try?

https://support.google.com/adsense/answer/9183363

[Sono]

I have already checked that what you linked, but it does not help. I have experimented with things today, and this is what I concluded.


Okay so what I found:

The left and right padding settings for the FRAME and CONTENT_SECTION divs in the default forum theme does not cause this problem

It seemed to me that confuses the Google Adsense script, but no. I set equal margins and paddings around, yet the Adsense banner still appears off-centered.

Interestingly when you inject the Adnsense code in the Footer, it works without problems. It appears centered, no clipping.
The reason for this is still not clear to me, but this proves that something confuses the script when I place it inside the board elements then.

Maybe the Simple Portal mod confuses the script
One possible cause of the reason can be that I have Simple Portal mod installed, and I placed the script there all the time. Inside the elements it calls. I chacked those as well, they do not seem to have any improper margin or padding set, though. But when I inserted the Adsense code to the footer, I placed it outside of the Simple Portal elements, and as I mentioned it worked. So.... maybe it worked because there the Simple Portal stuff didn't confuse the script. Maybe. Another interesting thing is that when I install Simple Ads mod, and place the code in the fileds of that one, the banner appears off centered, too, but positioned differently than in case I put the code in the Simple Portal fields. So, it seems it makes sense in which elements of the forum board you place the code. Unfortunately I did not have a pure theme this time to test the situation without Simple Portal and Simple Ads installed. But if you have this stuff installed, maybe that is the cause of problems.

Anyhow, if you find your Adsense Banners appear off-centered, you can compensate, even when the mods mentioned above are installed.
I found two solutions, though they are not very elegant, but do work:

1.

Code Select Expand

<div style="text-align:center;margin-left:-10px;">
<div style="
    max-width:729px;
    display:block;margin-left:auto;margin-right:auto;
   
   
    text-align: center;">

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!--  - top - select pages -->
<ins class="adsbygoogle"
     style="display:block;height:100px;margin-bottom:10px;"
     data-ad-client="xxxxxxxx"
     data-ad-slot="xxxxx"
     data-ad-format="horizontal"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
   

So in this code, I set -10px for left margin. By trial end error I figured out that this is the amount the ads appear off centered with. But it is not enough on its own. I had to limit the banner width at 729px. Because my board section minimum witdh is around 800px, so this guarantees there will be no clipping. If you want to make it available for wider banners to be displayed, you can solve that with media queries, controlling appearance in case of larger screen sizes. But this is the basic idea, and it works.

2.

Code Select Expand

<div style="text-align:center;">
<div style="
    width: 100%;
    display: inline-block;
   
   
    text-align: center;">

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!--  top - select pages -->
<ins class="adsbygoogle"
     style="display:block;height:100px;"
     data-ad-client="xxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxxxx"
     data-ad-format="horizontal"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>

This solution depends much less on screen sizes, etc. It centers the Adsense Ad all the time, but there are two problems with it: the widest banners may appear clipped on the sides a bit, and secondly, this code modifies the things that are in the Adsense iframe. I am not sure that is legal, however in case it does not hurt the proper appearance of the banner, it is, I think. If you insert the code in the way your Adsense account generates it for you, it can appear clipped and improperly as well. So I think minor clipping is not the end of the world. You can experiment however what to change inside the Adsense iframe to avoid clipping.

So this is what I found so far, hope it helps, if anyone has a more elegant and better solution, le me know!