A couple of months ago, I wrote about possible issues with smart sizing vs. advanced sizing for AdSense responsive ad units. AdSense now started to only offer publishers the smart sizing ad tag which are, as far as my tests show, less than perfect. One huge issue is ad space that is staying blank or an error thrown (mostly invisible) in your browser console. In this post I am going to show you three approaches on how to fix this.
What you are going to learn:
- What causes blank space for responsive ads
- A fix using exact sizes with coding skills
- A fix for WordPress without coding skills
- A fix with a container and css
AdSense responsive staying blank
The responsive ads are great to monetize mobile websites with responsive layouts, so you definitely don’t want to ignore them. However, a common problem you can have with auto-sized AdSense responsive ads is that they don’t show up. Of course, like with all new AdSense ad tags, you first must wait some time after creating them, but if you don’t see ads appearing after a few hours, you might have this problem.
In case of responsive ads, “not showing up” doesn’t mean that you see a blank space, but you won’t see anything at all, because the space collapsed. This is mainly caused by AdSense not being able to detect the available space for the ad.
Cannot find a responsive size for a container…
If you are familiar with the JavaScript console in your browser, you can find the following error message there.
This message tells you that your smart sized (“data-ad-format=auto”) responsive ad (“responsive size“) wasn’t able to detect the available space (“width=0px“);
Give it some space
The solution sounds simple at first. In order for AdSense to detect the available space for the ad, you need to define it somehow. I know, this is not perfect, because you probably choose this ad type in order to not bother with the space, but unfortunately, you must define it at least a bit.
These are the 3 approaches I am using to do that.
1. Define the ad sizes manually (coding skills needed)
If you are familiar with CSS3 media queries, you can set the exact ad size per browser size. This way is almost guaranteed to work, but a bit complicated not just for those with coding skills, because you also need to check the browser width to see when the ad fits.
This is the sample code from the AdSense manual that allows you to do this.
<style type="text/css">
.adslot_1 { width: 320px; height: 100px; }
@media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }
@media (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } }
</style>
<ins class="adsbygoogle adslot_1"
style="display:inline-block;"
data-ad-client="ca-pub-1234"
data-ad-slot="5678"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>Code language: HTML, XML (xml)The <style> part of the code contains the media queries with the minimal browser size and the creative size. My pro tip is to use default ad sizes and not just any measures here.
The <ins> tag is very similar to the smart sizing ad tag, but with the difference that the data-ad-format=”auto” attribute was removed.
2. Define the ad sizes without coding (with a WordPress plugin)
If I am on a WordPress environment and want my clients to be able to adjust sizes later without messing up my css code by accident, I am using my Advanced Ads plugin together with the responsive ads add-on.
Advanced Ads already has a dedicated AdSense support with the smart sizing tag included, but the responsive add-on takes it a step further and offers an interface to set the sizes of the ads and the minimal browser width with an easy interface that looks like this.
Using the form is not only bullet proof for coding errors like missing spaces, it also provides a nice list with the sizes that everyone can read. It even lets you disable ads for specific sizes.
If you want to learn more, check out my very detailed tutorial on how to set up the sizes for responsive AdSense ads and learn about my default setup that provides good results on most responsive layouts.
3. Define the container
If you are not able or willing to set the ad sizes manually, you can try to make the container width stable so AdSense can detect a width. This is not going to work if there is only collapsed space and no real container, like with most ads injected into the post content. For places like a sidebar widget or the header, chances are that they already come with blank space that doesn’t get used, but has a fixed height and a width. Even if the latter is set automatically, with the right settings in css, this can work.
First, check the space where you want to inject the ad for an existing container. If there is one that has a width and height above 0, you should be able to use it with the smart sizing responsive ad.
If there is no such container, you have to create one with the following css styles:
display: block;
width: 100%; /* auto might work as well */
height: 100px; /* auto might work, but a fixed height is often better */Code language: JavaScript (javascript)This method highly depends on the CSS your theme is using. It is not my favorite method, because I don’t believe in any custom ad format and prefer the standard sizes, but if the first two methods don’t apply to you, this might be your last chance to fix the smart sizing in AdSense.
Conclusion
I presented 3 solutions that can be accomplished with or without coding, with WordPress or other CMS. Was this able to fix your problem or did you find another solution. Please let me know in the comments.
Very useful tips for any Adsense publisher.
Reading your post I realized that I need to change some codes on my blog because using the old ones is no longer viable.
I hope that in my niche I will enough advertisers to avoid blank spaces.
Hi Helen, glad I could help!
Thanks a lot! These tips worked on my blog as well. I’m using Advanced Ads plugins and found my header Ad (Responsive) was not coming up, it was completely blank, now its working!
Regards!
Glad I could help. And thanks for using Advanced Ads.
Before moving on; first of all thanks for sharing such a knowledgeable resource. What if; we didn’t define the ad size manually and use “horizontal “or “rectangle” instead of “auto”. Is it OK or we will face some issue.
I must admit that I didn’t use that very much. It should help though, but I don’t know to which extent.
I am using this format in my new site; as the site is new so at present i am not getting enough traffic but as per the present click through rate; i can say it better than other site in which i have defined the manually. Lets see what happened in future. I will let you know.
I have faced this issue in earlier days, and then moved towards the first solution. In which I had to manually assign the ad sizes. So far it worked pretty well for me.
I’d like to apply the first, my ads will be in sidebar. But as responsiv e ads is dynamic in height, how should i define the css?
Hi, with the first option, there is no flexibility in height. You must set specific values for the various resultions. I.e., you can’t set something like “width: 300px; height: auto;” or at least I haven’t seen it working reliably yet.
I am here again to ask something ; i want to know which one is better asynchronous ads code or responsive ads code as per the earning. I am running asynchronous ads code on one of my blog and responsive ads code on other, and as per my experience asynchronous earning is far more better than responsive. What’s your opinion.
Async vs. responsive is like apples vs. peaches. If you mean the “normal” non fixed-size ad tag vs. responsive then I would agree that the default sizes perform better than most responsive ad units. The trick is to use standard sizes within responsive ads. This article also mentions how I set them up.
Wow, it was very helpful for my niche sites, cheers
I already did all many suggestion but adsense is not show up yet on my blogspot. Please have a look and help please {hidden} cheers
I can see the ads on your site.
Nahh … which one please? Its error the small ads, its custom that i found on google and it works. but other ads unit that i copy paste , it is still blank, please give advice … Do you see any blank space too please?
On TOP and Bottom is space blank, that is original ads should be there … Please help, and appreacite cheers
Please check the ad code and the javascript error console. It seems that there are double quotes at some point. Also, it can take a while – depending on your traffic – until AdSense displays all ads for new accounts.
Thanks for keeping answer me. But it already few days though. And I did copy paste really exactly like on ads code.
On layout blogspot there is automatic menu add “adsense”, is it automatic showing ads by google or should I delete and add ads code on html/ javascript? because I am desperate adsense is not show. thanks
and other question .. if you saw small ads text on my blog waliatin.blogspot.com I found that code on google forum, and its immediately show google ads, but only small ads text, I tried figure out but I have not answer yet haha, WHy that script code work so quick but ads code that from my adsense even not show yet, what do you think?
this is the code that i found on google,, is this legal?
google_ad_client=”ca-pub-7120959979613080″;
google_ad_host=”ca-pub-7120959979613080″”;
google_ad_width=270;
google_ad_height=420;
google_ad_type=”text_image”;
goole_color_border=”fffffff”;google_color_bg=”ffffff”;
google_color_link=”008000″;google_page_url=
“http://waliatin.blogspot.com”//–>
Looks like the AdSense code from someone else. You should definitely not use that. The double quotes also appear in that code, so are not the cause of AdSense not showing up.
I can see that the ad tag is loaded properly, so my best guess that you are not yet through the verification.
Please also keep in mind that other commenters have subscribed to comments and get an email every time you post. This is why I can’t give individual help here.
Thomas
Thanks I did delete the script code from my blogspot. My another question? do my ads no show yet on blogspot because no verification yet?
In beginning through by youtube then put my ads on blogspot also weebly web, but ads is not show on blogspot and weebly yet until right now!
I dunno about this, I earn nothing yet at the moment only 0,02$ haha
2 Months before I Applied for AdSense account when My website is very New and I
put AdSense code few minutes Ad Display and Disappear. After that I used my
brother AdSense and its working fine in my website.
Today I put AdSense code again in website and showing blank Space instead of
Ad. I also checked all link as you suggest in your blog site
Google Adsense Sandbox Displaying Ad and
http://www.bannedcheck.com/
Adsense Results:
Congratulations, badikhabar.com is Not Banned from Google AdSense!
Google Results:
Congratulations, badikhabar.com currently has pages indexed by Google.com,
therefore badikhabar.com is Not Banned from the Google Search Engine!
Please help to fix this issue.
Not being banned from AdSense doesn’t mean that your own AdSense account is already verified. You should check there first.
Hi…
I’m new on Adsense, interesting article. I have few question
1. I want to add Adsense on top of article title, that’s mean inside post-inner, above post-title, I’m wondering how to make the Adsense occupy post-inner on full width? Is it okay to me to use, let’s say something like this, width: 100%
.adslot_1 { width: 100%; height: 100px; }
@media (min-width:500px) { .adslot_1 { width: 100%; height: 60px; } }
@media (min-width:800px) { .adslot_1 { width: 100%; height: 90px; } }
because by default if the screen on 640px, it will only serve the ads on 468px
I know this is possible with CSS, I’ve known HTML/CSS for long, but is this okay with Adsense? Am I violating Adsense guideline?
2. Can I change media query size of Adsense? as default it’s :
0-499px, 500-799px, and 800px and above.
Can I change it to like 0-640px, 641-1000px, and 1001px and above?
Thanks for your reply
Hi Randy, AdSense just gave this example, but you can of course adapt the media queries to your needs.
Thomas
I just realized that width 100% will only benefit for text ads, for image ads this unnecessary because for responsive Adsense only has limited image size (320×100, 468×60, 728×90). Unlike text that theoretically have very flexible size, can occupy any div size.
I have another question, I want to put 300×250 ads on my sidebar. My sidebar is using percent from full width, so it will turn to less than 300px width on certain screen size, then what’s happen to the ads?
Any advice for someone who’s new on Adsense? Thanks
You can just disable the ad setting it to display: none; for the screen width where the sidebar is too small to make the 300×250 fit. Or just select a smaller size then.
That works on my site and very easily done as the way is quite simply described by you.
So creating ads individually for each size would be better than responsive ads?
It can definitely fix some errors and with the manual sizes of the responsive ad unit you still keep the advantages of an adaptive size.
Can you elaborate?
I was just referring to method 1 and 2 here in this post.
can you send me the video that how we can solve this issue on blogspot sites?
Sorry, I haven’t made a video for this, but you should be able to use the manual code on blogspot sites too.
Great tips, Thomas! Is it possible to achieve both leaderboard and square size format with the above css? I have a site where the responsive ad unit still remains square even in the desktop. Am I missing anything?
I don’t know if you are missing something, but yes, you can define a width for the leaderboard using the custom css rules.
Hi Thomas. When I look at the console for my ads, I see the error “Failed to load resource: the server responded with a status of 400 ()”. Do you think this is a similar cause, or something else is happening here?
Hi Deren, this issue comes with new ad units and normally resolves itself in minutes or a few hours.
Hi Thomas, thanks for the quick reply! I did only create the ad units about 30 minutes ago so I probably just need to be patient. I’ll see how it goes in the morning. Thanks!
Hi Thomas, confirming the ads are now appearing every time I load the page. Thanks for your reassurance last night.
That works on my site and very easily done as the way is quite simply described by you.
article is a good. dear friend, can u help me. My web site is developed me from wordpress. but Google ads do not show it correctly. Sometimes show the ads, but another time not show. can u fix it. it’s big help. Thank you
If the information on this site don’t help you, you can check out our services.
Very helpful post Thomas, but in my website I couldn’t configure adsense properly. The exact problem is it still shown blank. I have tried all RnD. Could you help me out by looking a glimpse in this page: [link removed]
Hint: take a look into the JavaScript error console. It will tell you where the problem is.
I tried these codes on dummy blogger account and it displays everytime. Further I got this JS error message – Failed to load resource: the server responded with a status of 404 (Not Found)
I received message from adsense account saying that “ad inside invisible or zero-width container”,
I am planning to use 3rd option, add manual code on my style.css, hopefully it should work.
Just wanted to leave a msg saying Thanks, Solution 1 helped me resolved my issue with automatic ads not displaying!
If our theme is responsive already, do we really need to use responsive ads type? Or our ads with particular size will follow our responsive theme to automatically responsive? It confuses me tho.. I hope you don’t mind to answer. Thank you for your kindness and this informative article
Especially with responsive themes you would need responsive ad units, because the normal ad sizes are not checking if they fit into your theme.
Thankyou very much, the first tip solve my adsense auto sizing problem on my blog. Great post.
Panda Gila , when you use responsive ad unit it automatically adjust its width and height as per you theme. So don’t worry, it perfectly working and i already using ad unit on my WordPress blog.
Hi Thomas.. I am new to Adsense & I am using Blogger platform. My issue is, Responsive ad units are working perfectly. But whenever I choose other ad formats like, Leaderboard, Rectangle & so… it shows only blank ads., If again I choose responsive ads then it works fine. I don’t understand what is the issue.
Hi Aptha, that is an interesting issue. Unfortunately, this is the first time I hear about this issue and I have no idea how Blogger might influence this.
That last little piece of code fixed all of my issues. You are awesome, thanks a bunch.
hi thomas.. i am using media query to define ad unit size..
for example, one of my ad unit,
i set it to be 200×200 for screen below 500px, and 100%x 90px for screen larger than that..
but when i see report on adsense, under “creative size”, i see many other size for that one ad unit.. i can ignore it if the impression is small, but it isn’t..
based on what i set, the size should be only 200×200, and a variation of widht with height 90.. but there is size 300×250, 250×250, or even size that not conventional at all like 540×480 , and many more..
what i want to ask is,
why it happen ? is it normal or maybe there is something wrong ?
Hi, are you also filtering the report by this specific ad or did you maybe include other ads when checking this?
Hi tomas..
Yeah.. I filter it only for that specific ad unit..
And it happen to all of my ad unit…
Is css media query not working on some device or what ? I cannot find the cause..
Adding a fixed width in px seems to work as far as the width of the adsense ad that Google loads, but not height – at least for me anyway. I have a container of a defined width and height but the ads that are loading are 600px whereas the defined height is 260px. Have you come across this before?
Hi Ian, sorry for missing your comment earlier. If you are a user of our Advanced Ads plugin for WordPress you can reach out to our support and we will take a look at it.
Great article, I found this as I am having problems with my ads which were showing for a while but then stopped for some reason…on going through your post I have double checked my site and I see this doesn’t apply to me but still a great write up all the same.
Hi Guy, if you are using our Advanced Ads plugin for WordPress, you can reach out to our support and let it checked. It is still possible that when you use AdSense’s responsive ad units that this happens like described.
What does mean for “data-adsbygoogle-status=done “? I have seen many website using this code in adsense code.
Hi Ratan, good question. This is actually written into the code dynamically after the ad was loaded, not by the publisher when he puts the code into his site.
Hello, can you tell me what I should put in adslot_1? Can I put any name or should I take the name of my ad?
Yes, you can change adslot_1 to something else. It is just important that it is the same in CSS and class.