1. Home
  2. Forums Index
  3. Search Engines and SEO / Google AdSense - Display Ads 3:18 pm Apr 27, 2026

Forum Moderators: martinibuster

Message Too Old, No Replies

Changed to responsive ads, and most of them are blank

I'm using 'display:none' divs to hide/show ads for mobile/desktop users

         

guarriman3

1:36 pm on Jan 29, 2021 (gmt 0)

10+ Year Member Top Contributors Of The Month



Hi,

Some months ago I read the "Opportunities" section of Google AdSense, and I was suggested to "Grow the earnings with responsive ads".

Starting on Jan 5, I changed most of the ads I show on my website with the new code, within 'divs' of a specific minimum size to avoid Cumulative Layout Shift (CLS) issues. I show 3-4 ads per page, and these 'divs' are always shown within the HTML code, both for mobile and for desktop. But I created the following CSS style to show/hide ads depending on the visitors: 

/* I hide the mobile slots and show the desktop slots */
@media screen and (min-width: 500px) { 
 div.adsense_responsive_mobile {display:none;}
 div.adsense_responsive_desktop {min-width: 300px; min-height: 250px;}
}

/* I hide the desktop slots and show the mobile slots */
@media screen and (max-width: 500px) {
 div.adsense_responsive_mobile {min-height: 266px;}
 div.adsense_responsive_desktop {display:none;} 
}


Accordingly, I'm asking Google servers for 6-8 ads per page, but the half of them are in 'display:none' div slots.

However, I see that most of times those ads are blank, and wondered if the strategy I'm following is not the right one because I'm wasting too many resources from Google Ad servers and Google decides not to show any ad.

Any tip is welcome, thank you.

not2easy

3:10 pm on Jan 29, 2021 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



Can the Mediapartners-Google bot read your css files? I mean it is not disallowed in robots.txt, right? If the change is recent, they seem to take some time to digest the changes to provide usable ads. I wish that AdSense had an equivalent URL inspection tool as they offer in GSC, but nothing I know of other than time lets you know if they have problems.

NickMNS

3:29 pm on Jan 29, 2021 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Are there any errors appearing in browser console (ctrl+shift+I in Chrome or right click and "inspect element")? I am willing to guess that there is an AdSense error, something to the effect of no available ads for the size. If this is that case then you will need to add a height to the style of the parent div of the ad unit. In order for the responsiveness to work the script needs to be able to calculate height or width. You can set a min-height as you did in the media query.

guarriman3

2:44 pm on Jan 30, 2021 (gmt 0)

10+ Year Member Top Contributors Of The Month



Hi @not2easy and @NickMNS, thank you very much both for your nice answers.

Can the Mediapartners-Google bot read your css files?

There is no CSS file within the 'robots.txt'. In fact, I do not use external CSS files (it comes from the times I used AMP), and I use just internal CSS through the <style> element inside the <head> section. Should I use external CSS to help Mediapartners-Google bot to know how my website is?

If the change is recent, they seem to take some time to digest the changes to provide usable ads

I started to change the first sections with the new responsive ads in early January. The last sections were changed in mid-January. Should I wait for some extra days?

I wish that AdSense had an equivalent URL inspection tool

It would be a very valuable tool for publishers.

Are there any errors appearing in browser console (ctrl+shift+I in Chrome or right click and "inspect element")?

Yes, I get several error messages like the following 
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 made a test in a section, removing the strategy of showing always all the slots (both Mobile and Desktop), and showing just the Mobile slots for Mobile users, and Desktop slots for Desktop users, and the errors dissapeared. Not sure now if the ads are always shown. I've tested some times in this section with changes, and found no blank ad.

The case is that I decided to show always Desktop and Mobile slots to allow my cache-system to cache all the HTML code of the pages, regardless of the type of visit I had (Desktop or Mobile). If there is a Mobile visitor, the Desktop slots are not shown, but it seems I'm overloading the AdSense petitions, right?

If this is that case then you will need to add a height to the style of the parent div of the ad unit. In order for the responsiveness to work the script needs to be able to calculate height or width. You can set a min-height as you did in the media query.

I do not understand very well your advice. I wondered if you could explain it with other words. Thank you.

NickMNS

3:48 pm on Jan 30, 2021 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



The errors message explains the issue: 
No slot size for availableWidth=0

I guessed height, but it was width the problem.

so your problem is here: 

@media screen and (max-width: 500px) {
 div.adsense_responsive_mobile {min-height: 266px;}
 div.adsense_responsive_desktop {display:none;} 
}


You are setting min-height but not a min-width. Set your min-width to 300px and that should solve the issue. Simple.


[edited by: not2easy at 3:58 pm (utc) on Jan 30, 2021]
[edit reason] readability [/edit]

NickMNS

3:48 pm on Jan 30, 2021 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



On an unrelated issue with your implementation:
My understanding is that to hide ad units correctly one needs to specifically set the ad tag to display:none, not just the parent div. Your code (div.adsense_responsive_mobile) seems to target the parent div. To be sure you should create a new classes mobile_ad, and desktop_ad and then where appropriate add: 

<ins class="adsbygoogle mobile_ad".... />


And then add to @media queries 

@media screen and (max-width: 500px) {
 div.adsense_responsive_mobile {min-height: 266px;}
 div.adsense_responsive_desktop {display:none;} 
 mobile_ad {display:block}
 desktop_ad {display:none}
}


The above wont fix the problem but it is possible, and likely wont change anything visibly on the screen, but what it will do is ensure that the ad code ins't called when the ads are not displayed.

One final note, the point of a responsive layout and responsive ads is so that layout adjusts based on screen size such that you do not need to maintain a separate code base for each. What you appear to be doing is blending desktop design and mobile into single file and then using media queries to switch between them, this is less than ideal from a maintainability perspective. You should try to use the same ad units for both mobile and desktop. If you want to hide an one ad unit mobile due to a lock of space, that is fine, but if you are doing this to show ads in different locations in your layout then there are better ways to achieve this.

martinibuster

6:32 pm on Jan 30, 2021 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



I think you may be making the ad insertion more complicated than it needs to be and that may be contributing to what is happening with the blank ads.

Regarding the CLS...

Responsive ads fit into their respective div containers. If you're experiencing CLS from the ad then that may be because the location of the insertion is not the best spot because that spot lacks the appropriate CSS to contain the ad, it's not an appropriate container.

For example, if you have a section of a site that is styled with specific widths and borders, creating a div that is styled with the same class name is going to create a container from which the responsive ad will not exceed.

So if you have a main content area and you want to place ads beneath that, you COULD use the class name that results in a similar layout for the ad. OR you can style one yourself from scratch.

Or inserting that responsive ad within a header area, the responsive ad should not expand beyond the parameters set by the class that manages that header area. So if you have a section in the header that has an H1 or H2 for the title, you can add a couple breaks and then add your AdSense code beneath it.

There are many ways to accomplish the same thing. Another example, if you have a forum, it's often possible to use the CSS class that manages the look of the posting area and add a new div that looks like the posting area but contains an ad unit. Just find the spot in the code where the posts end then add a new div that has that class and contains the ad code. The resulting ad unit will be constrained by the parameters set by that CSS class.

If you're finding CLS happening, that means that the spot you are inserting the code into does not have the proper styling and there may be a better spot to add the code into, like in a different DIV or in a new standalone DIV.

guarriman3

10:09 am on Feb 1, 2021 (gmt 0)

10+ Year Member Top Contributors Of The Month



Hi @NickMNS, @martinibuster,

Thank you very much for your nice answers. I'm afraid I'm misunderstanding how the slots and the styles worked :-(

I changed the styles of my webpages, setting the min-width to 300px for the mobile ad slot. 

<style>
@media screen and (min-width: 550px) {
.mobile_ad_slot {display:none}
.desktop_ad_slot {display:block; min-width: 300px; min-height: 250px;}
}

@media screen and (max-width: 550px) {
.mobile_ad_slot {display:block; min-width: 300px; min-height: 266px;}
.desktop_ad_slot {display:none}
}
</style>


And inserted two test ads, one for desktop under the H1 title, and one for mobile undert the h2 subtitles: 

<h1>Title</h1>
<ins class="adsbygoogle desktop_ad_slot" data-ad-client="ca-pub-1234" data-ad-slot="123" data-ad-format="auto" data-full-width-responsive="true"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
<h2>Subtitles</h2>
<ins class="adsbygoogle mobile_ad_slot" data-ad-client="ca-pub-1234" data-ad-slot="123" data-ad-format="auto" data-full-width-responsive="true"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script>


Three caveats:
* Both ads are the same unit with the same 'data-ad-slot'
* I removed the 'style="display:block"' from the AdSense code
* The load of the 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js' JavaScript is performed once in the same point (desktop: before the closure of <head>; mobile: in a lazy way).

However, I'm still getting the error message 

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)"}


Not sure what I am doing wrong.

If you are doing this to show ads in different locations in your layout then there are better ways to achieve this.


Yes. All this I'm doing is to place the mobile and desktop ads in different places on the screen.

I have a single HTML code for mobile and desktop, and I want to cache it. The design is fully responsive, but I want to place the ads in different places. For example:
* a desktop ad below the H1
* a mobile ad just when the fold starts

Unfortunately I haven't found a smart solution to implement it. I would be very grateful if you could share a solution.

NickMNS

1:27 pm on Feb 1, 2021 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Here is the code to fix error: No slot size for availableWidth=0". Note the addition of the div that wraps the ad code. I am not 100% sure that this will work. If it doesn't then you will need to set the height explicitly, that is either replace the min-height by height alone, or adding height 100%. But try it like this first and see. "min-height" will let the ads expand to any height greater than the height set, if you want to restrict the ads from expanding past that height then you can simply replace "min-height" with "height" and that fixes the problem for sure. 

<style>
@media screen and (min-width: 550px) {
 .mobile_ad_slot {display:none}
 .desktop_ad_slot {display:block; min-width: 300px;}
 .ad-wrapper {min-height: 250px;}
}
@media screen and (max-width: 550px) {
 .mobile_ad_slot {display:block; min-width: 300px; }
 .desktop_ad_slot {display:none}
 .ad-wrapper {min-height: 266px;}
}
</style>



<h1>Title</h1>
 <div class="ad-wrapper">
 <ins class="adsbygoogle desktop_ad_slot" data-ad-client="ca-pub-1234" data-ad-slot="123" data-ad-format="auto" data-full-width-responsive="true"></ins><script>(adsbygoogle = 
 window.adsbygoogle || []).push({});</script>
 </div>
<h2>Subtitles</h2>
 <div class="ad-wrapper">
 <ins class="adsbygoogle mobile_ad_slot" data-ad-client="ca-pub-1234" data-ad-slot="123" data-ad-format="auto" data-full-width-responsive="true"></ins><script>(adsbygoogle = 
 window.adsbygoogle || []).push({});</script>
 </div>


Regarding:
but I want to place the ads in different places.

If it is only at one place on the page then it is fine, in that it is easier for you to understand and maintain. But if you do this for each ad unit on the page then you may want to consider changing it. This can be done with flex-box, which allows you to reverse the order of items on the page.

I suggest we fix this error before we get into it.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Search Engines and SEO / Google AdSense - Display Ads 3:18 pm Apr 27, 2026