The Internet is moving with smaller devices and mobilities. A number of smartphones and tablets are growing more than statistics predicts. The 2016 stats shows there are more than 2.1 billion smarts phones are in market and researchers predicts that it will be 6.1 billion by 2020, which mean it will grow by triple than in previous years.

With various screen sizes and revolutionary capacity, smartphones are making life earlier. Google recent stat shows nearly 60% users use their smartphone to perform a search. So, if your business is somewhere related to this trend, it is very important you catch the current trend for your business, blog or website.

With overwhelming Google Adsense features, such as a large number of ads sizes, responsive ads unit, on-time payment, under the world no1 search giant umbrella; Adsense certainly is one of the best monetizing solutions for a publisher. Taking into account the recent smartphone and Google stats, it is good to go with responsive Adsense ads unit. Google do have nicely arranged responsive Ads, which by default can show the Ads based on your design. But default does not always match the design of all and sometimes result on blank / no ads display or ads. Which eventually you will be losing the revenue.

Related: Six easy tips for Google ADSENSE approval

In default responsive ADSENSE ads you will get this error on your browser console:

Error: Cannot find a responsive size for a container of width=0px and data-ad-format=auto. 

Which basically mean that your website theme container and Google Adsense responsive by default container does not match the sizes so that Ads in your website or blogs are blank.

Google Adsense Responsive Ads goes blank, How to fix?

No need to worry here is the solution for responsive ads goes blank on display! you have to do the little bit of CSS as follow.

[css]

<style>
.adslot_responsive { width: 600px; height: 250px; }
@media(min-width: 240px) { .adslot_responsive { width:100%;height:90px; } }
@media(min-width: 320px) { .adslot_responsive { width:100%;height:90px; } }
@media(max-width: 766px) { .adslot_responsive { width:100%;height:250px; } }
@media(min-width: 767px) { .adslot_responsive { width:100%;height:250px; } }
</style>
[/css]

[code lang=”js”]
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!– GOOGLE ADSEMSE-RESPONSIVE-ADS –>
<ins class="adsbygoogle adslot_responsive "
style="display:inline-block"
data-ad-client="REPLACE-THIS-WITH-YOUR-PUB-ID"
data-ad-slot="YOUR-DATA-SLOT-NO"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
[/code]

I have CSS start with <style> with 4 @media size and one default size. Each CSS class (.adslot_responsive have width and height) are connecting with google <ins class>

The code above is designed for the content page (somewhere first or second paragraph) with 600 pixels width and 250 pixels by default desktop size. I am doing something alternative than others normally do. I have assigned the (.adslot_responsive { width: 600px; height: 250px; }) for default ads units. I am aware of my CSS container and users statistics. So I better would like to make ads size cover as the width of the responsive content. So, I assigned the 100% on width. For the height, I have given the specific value. If you have fixed size of design @media CSS container you can specify the size as well.

Navigation is very important for small devices. It is also very important your above-the-fold responsive ads should not bother your users while reading (should NOT force to click or do NOT place ad size that leads users to click) the content and should be easy for the user to navigate. Google favored 320px X 100px size banner for the overall smartphones and 320px will cover almost all the smartphones width. Having said that you can use any of other sizes below or equal to 250 based on your website or blog design.