1

I'm trying to build a webpage which shows responsive AdSense mobile ad slots when mobile visitors and desktop ad slots when desktop visitors.

This is my HTML code:

<html><head>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
</head><body>
<style>
.adslot_mobile { display:inline-block; }
.adslot_desktop { display:inline-block; }
@media only screen and (min-width : 320px) {
    .adslot_desktop {display:none;}
    .adslot_mobile {display:block; height: 300px; min-width: 400px; background-color: green;}
}
@media only screen and (min-width : 992px) {
    .adslot_mobile {display:none;}
    .adslot_desktop {display:block; height: 300px; min-width: 400px; background-color: red;}
}
</style>

<p>foo</p>
<ins class="adsbygoogle adslot_desktop" data-ad-client="ca-pub-1234" data-ad-slot="1234" data-ad-format="auto" data-full-width-responsive="true"></ins>
<p>foo</p>
<ins class="adsbygoogle adslot_desktop" data-ad-client="ca-pub-1234" data-ad-slot="1234" data-ad-format="auto" data-full-width-responsive="true"></ins>
<p>foo</p>
<ins class="adsbygoogle adslot_mobile" data-ad-client="ca-pub-1234" data-ad-slot="1234" data-ad-format="auto" data-full-width-responsive="true"></ins>
<p>foo</p>

<script>
function loadGoogleAds() {(adsbygoogle = window.adsbygoogle || []).push({});}
window.addEventListener("load", loadGoogleAds);
</script>
</body></html>

When loading the webpage through the Desktop, the two red slots and the ads are shown, with no JavaScript console error.

However, when loading the webpage through the Mobile, the green slot is shown, the ad is not loaded, and I find the following JavaScript console error:

P {message: "adsbygoogle.push() error: No slot size for availableWidth=0", name: "TagError", pbr: true, stack: "TagError: adsbygoogle.push() error: No slot size f…esyndication.com/pagead/js/adsbygoogle.js:80:179)"}

I've been browsing this issue in the forums and, as far as I understand, it comes from the fact that 'adslot_mobile' has no width. However, I've checked on the browser (Chrome DevTools, selecting it) that this green slot have a 'min-width' of 400px.

What am I doing wrong?

1
-1
window.onload = function() {
    (adsbygoogle = window.adsbygoogle || []).push({});
}

Can you try the code I wrote here? I have the same problem on my website. I'll use it there too.

2
  • I am having this issue and I found this code everywhere but It stil not working. Even with jQuery loading...
    – Loenix
    Apr 26 '21 at 9:42
  • This code is already included in the question: function loadGoogleAds() {(adsbygoogle = window.adsbygoogle || []).push({});} Including this again isn't going to help. Aug 16 '21 at 12:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.