Adsense error when upgrading to 1.3.2.1

[ighosts22]

Hello,

After upgrading to version 1.3.2.1, Adsense's responsive ads in the article have overflowed and overlapped to the right sidebar, in the browser chrome.

Firefox and IE are still good!

Is this a bug in the new version? Thanks very much!

[JiveDig]

Very strange. What version did you upgrade from? Do you have a live link and/or screenshot?

[ighosts22]

I just bought and installed a test page a few hours before version 1.3.2.1 was released! So I think is version 1.3.1.

Yes, you can visit "x.ocuaso.com" and see the post! Besides, I also installed a completely new site without any plugin, with version 1.3.1, everything works fine.

Since I have changed everything on two sites for comparison, I think this is a topic related issue. (On firefox and IE still works fine)

Hope you will check!

Thanks very much!

[ighosts22]

Hi, here is a screenshot:

https://imgur.com/CGXNcfQ

[JiveDig]

That looks like you are trying to load a banner width ad inside the content area? Shouldn’t you limit that ad size to around 800px or so?

[ighosts22]

No, this is a responsive ad, and it still works well on IE, Firefox, as well as other genesis topics.

I tried adding fixed width for ".content", like:

.Content {
width: 756px;
}

Replacement for the default css:

.Content {
width: 100%;
}

=> The problem has been corrected.

However, I'm not an expert to know how to fix this "right" or not. Being forced to use fixed ads on a responsive theme seems to be a downside. Hope you will check and fix!

Thanks very much!

[JiveDig]

Ah, thank you. I will look into it soon.

[tiennbp]

My website got this problem, too. But i dont know code. Please fix this soon. Thank you very much!

[JiveDig]

This is a really tricky one. I'm not seeing anything in the theme that would cause this. The ad code has width: 1100px; in it, maybe generated by js, but i'm not seeing the actual cause of the issue at first glance.

Do either of you have adsense code that I can use for testing to try to recreate the issue on my local testing site(s)?

[ighosts22]

You check with this adsense code, can see it works well on version 1.3.1.

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- OCS-RESPONSIVE -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-3493036461024195"
     data-ad-slot="8731784185"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Width 1100 is automatically generated by the width of the content, and for some reason Adsense understands that content width = .content + .sidebar-primary (On chrome). Until adding fixed width to the .content as commented above, this problem has been fixed. That is a temporary solution for my official website, is using Mai theme.

[JiveDig]

Hey @ighosts22 do you need to verify my domain to use that code or something? Sorry, not familiar with adsense, and putting that code in the header gives a 403 forbidden trying to load it.

[JiveDig]

I found this https://stackoverflow.com/questions/26864860/is-google-adsense-available-for-localhost but does look like the domain would still need to be verified. I'm not sure how to troubleshoot/test this issue so I can see about a fix.

[JiveDig]

For reference, this seems to be the issue... and it's not great. It seems AdSense just isn't capable of working with flexbox yet.

Adsense's responsive code determines the width of the iframe it inserts based on the width of the parent element in which it is placed. Normally this works fine because even when the parent element has no content yet, it still has a width because it fills the available width.

However, if your parent element is within a flexbox row which determines the width of its members based on their content, the width of this will be zero until content is added. So of there is nothing else in the box other than the Adsense code, at the time Adsense calculates the available width, it's zero.

You need to get around this by setting the box to have a flex basis other than auto, or to apply a width or min-width property to the box, so that in the initial state before Adsense has run its code, it'll have a nonzero width.

So on the specific flex member, either set a flex basis other than auto (eg a percentage or px)

flex: 1 0 30%
Or set a width or min-width

min-width: 30%
You can't use a flex basis that determines width based on content when the only content is an Adsense ad, as the ad is inserted afterwards by JavaScript.

from here: https://stackoverflow.com/questions/36955406/flexbox-causes-adsense-error-adsbygoogle-push-error-no-slot-size-for-availa

[JiveDig]

Setting a min-width isn't really feasible in a theme since the widths are all different depending on the layout. This may be something that needs to get dealt with on a per-site basis, sadly.

[ighosts22]

When the width is less than 993px, the sidebar will disappear, which is no longer a problem, since there is no sidebar for overlapping ads.

Can you solve this problem on a computer screen, larger than 993px, with the flexibility of an expert? :( Sadly if it was only for a small matter that I had to give up this great topic!

Is there any hope to wait in the near future? Strange that it was so long since the last update, only me and another person raised this issue! It looks like most of the people who use Mai theme, do not contain Adsense ads in the site! :D