TagError: adsbygoogle.push() error: No slot size for availableWidth=0 when i use responsive ads

Question

i have responsive ads set for Adsense

I am getting the error:

uncaught exception: TagError: adsbygoogle.push() error: No slot size for availableWidth=0

on every page that has this code

<style type="text/css">
.adslot_2 { display:inline-block;width: 336px; height: 280px;}
@media (max-width: 336px) { .adslot_2 { width: 300px; height: 250px; } }
@media (min-width: 500px) { .adslot_2 { display: none; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle adslot_2" data-ad-client="removed for security purpose" data-ad-slot="removed for security purpose" data-ad-format="rectangle"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

i tried tampering with the code a lot but still getting the same error note that i have other responsive ad units with different codes that are not showing this error so i am 100% sure the problem is with the code itself

my objective is to hide the ad from desktop and show it on mobile devices

what is wrong with the code?

Answer 1

There are (basically) two different methods of responsive ad unit "sizing" in Google AdSense.

• "Automatic sizing based on the space available" with data-ad-format. See About responsive ad units page.
• "Exact ad unit size per screen width" with @media queries. See How to modify your responsive ad code page. (You'll find there are "variations", different implementations of this method.)

The first one is automatic, the second is "manual".

Usually no method can be automatic and manual at the same time, because there will be a conflict between the two, and I think your code should work fine if you remove data-ad-format="rectangle".

If that works for you, please check again "My ads" > "Ad units" page in your Google AdSense dashboard, and make sure this ad unit ID (data-ad-slot) is listed as "Responsive" - none of the two methods should be used with fixed sized ad units.

Answer 2

I had a similar problem. I noticed that it was because of the banners which had been made invisible based on the size of screen. A solution was to rename the "adsbygoogle" class (I went for 'ADSENSE') to make sure the adsense script wouldn't do anything with the banners before I remove them from the DOM if they were not visible once the stylesheet had been loaded (hence the 'load' event):

window.addEventListener('load', () => {
 let matches = document.querySelectorAll("ins.ADSENSE");

        Array.from(matches).forEach((element) => {
            let parentElement = element.parentElement;
            if (window.getComputedStyle(parentElement).getPropertyValue("display") === "none")  { 
                element.remove(); 
            } else {
            element.classList.remove("ADSENSE");
            element.classList.add("adsbygoogle");
                (adsbygoogle = window.adsbygoogle || []).push({}); 
            }
        });

});