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

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.

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({}); 
            }
        });

});