Responsive ads not working

Hello,

I have a 970x90 ads and I want it to resize to 336x280 when people view it on a low resolution, how cna I do that?

I tried the @media code explained on Google but it's working. How can I modify my ads to make it resize?

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<style type="text/css">
.adslot_1 { display:inline-block; width: 336px; height: 280px; }
@media (min-width:800px) { .adslot_1 { width: 970px; height: 90px; } }
</style>
<ins class="adsbygoogle adslot_1"
     style="display:inline-block;"
     data-ad-client="ca-pub-00000000000"
     data-ad-slot="00000000000"
     data-ad-format="horizontal"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Code (markup):

Best regards,

 

You can try this one. It's a bit different approach, but it works. You can adjust the ad sizes to whatever you want to. Make sure you replace xxxxxxx with your own ca-pub- and ad slot:

<div id="google-ads-1"></div>
<script type="text/javascript">
    ad = document.getElementById('google-ads-1');
    if (ad.getBoundingClientRect().width) {
        adWidth = ad.getBoundingClientRect().width;
    } else {
        adWidth = ad.offsetWidth; // for old IE
    }
    google_ad_client = "ca-pub-xxxxxxxxxxxxxxx";
    google_ad_slot = "xxxxxxxxxxxxx";
    if ( adWidth >= 1200 )
      google_ad_size = ["728", "90"];  /* desktops */
    else if ( adWidth >= 1024 )
      google_ad_size = ["728", "90"];  /* ipads */
    else if ( adWidth >= 640 )
      google_ad_size = ["650", "90"]; /* various tablets */
    else if ( adWidth >= 540 )
      google_ad_size = ["620", "90"]; /* larger cell phones */
    else if ( adWidth >= 200 )
      google_ad_size = ["350", "200"]; /* smaller cell phones */
    else if ( adWidth >= 180 )
      google_ad_size = ["300", "200"]; /* smaller cell phones */
    else
      google_ad_size = ["200", "200"]; /* smaller cell phones */
    document.write (
     '<ins class="adsbygoogle" style="display:inline-block;width:'
      + google_ad_size[0] + 'px;height:'
      + google_ad_size[1] + 'px" data-ad-client="'
      + google_ad_client + '" data-ad-slot="'
      + google_ad_slot + '"></ins>'
    ); 
    (adsbygoogle = window.adsbygoogle || []).push({});
</script>
<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
</script>

Code (markup):

 

I'm using almost the same code and mine works, it doesn't scale with the website though if you are just testing by resizing your window. If you refresh it'll change to the smaller ad.

 

Right, the code isn't fluid and resizes only on refresh.

 

Sorrry to say but i didnt get the point what exactly you were saying to implement Responsive ads in a website. Can anyone guide me how to implement responsive ads in a website. I tried but it doesnt work. I extract the code and put it in the web but it doesnt shows any ads. Can any one guide me in deep how to implemet responsive ads my website is http://www.wecareplanet.com Please do look and guide me.