CODEWITHSUNDEEP
asynchronousresponsive-designadsense
dinbrca
dinbrca

Reputation: 1107

Responsive Design & Google Adsense - can't get it to work

I am trying to change the Static Ads on my site to Responsive Ads using the new Responsive Ad Units on Google Adsense

I am stuck and here's my code:

HTML:

<div class="g-ad">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Responsive-Forum-Bot -->
<ins class="adsbygoogle g-ad-in"
     style="display:inline-block"
     data-ad-client="ca-pub-client"
     data-ad-slot="adnumber"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

CSS:

@media (min-width:500px){
    .g-ad, .g-ad-in{
        width:468px
    }

    .g-ad-in{
        height:60px
    }
}

@media (min-width:800px){
    .g-ad, .g-ad-in{
        width:728px
    }

    .g-ad-in{
        height:90px
    }
}

My problem is that the container changes width but the advertisement it self doesn't. Am I doing something wrong? I used the guide on the top and followed it..

Thanks in advanced, Din.

Upvotes: 0

Views: 678

Answers (1)

SimpleDesign
SimpleDesign

Reputation: 1161

Two things:
1) You need to specify height for the css class "g-ad", since the container div has that class.
2) AdSense responsive ads aren't 100% responsive: the ad does not adapts to it's container on window resize, after you resize the window you have to refresh the page in order to see the ads in their new sizes.

Google is adapting the ads according to the ads container width and height when the page loads, of course we(the developers) are not 'too happy' about it, I read on AdSense blog that they plan to fix that.

Upvotes: 1

Related Questions