Displaying responsive Google Ads - CSS problems

Question

I'm trying to display responsive Google Ads on my website. The box that includes Google Ads' code is responsive as well and it transforms itself to different sizes based on Google's Ad unit sizes.

So for different screen sizes, I show fitting ad sizes from that page, like so (Complete LESS for the ad space):

.ads {
    width: 733px;
    height: 116px;
    margin: 70px 0 0 30px;
    border: 2px solid @dry-red;
    background-color: white;
    padding: 0;
    border-radius: 4px;
    margin-right: 15px;
    float: right;

    .headline {
        background-color: @dry-red;
        width: 100%;
        font-size: .8em;
        padding: 2.5px 0 2.5px 4px;
        color: white;
        margin: 0;
        border-bottom: 1px solid @dry-red-xl;
    }

    @media (max-width: 1200px){
        width: 468px;
        height: 86px;
    }

    @media (max-width: 992px){
        width: 323px;
        height: 126px;
    }

    @media (max-width: 768px){
        width: 468px;
        height: 61px;
        margin: 50px 20px;
        float: none;
    }

    @media (max-width: 766px){
        margin: 5px auto 5px auto;
    }

    @media (max-width: 470px){
        /* display: none; */
        width: 323px;
        height: 126px;
    }
}

So far so good. The box transforms when it reaches its peak. Note that the original ad sizes from Google were increased for about 26px+ in order to fit along with .headline.

So now, I've placed Google Ads unit's code in the HTML like this:

<section class="ads col-lg-8 col-md-7 col-sm-7">
    <div class="headline">Advertisement</div>
    <!-- IMGzer_Header --> 
    <style type="text/css">
        .adslot_1 { width: 728px; height: 90px; }
        @media (max-width:470px) { .adslot_1 { width: 320px; height: 100px; } }
        @media (max-width:768px) { .adslot_1 { width: 468px; height: 60px; } }
        @media (max-width:992px) { .adslot_1 { width: 320px; height: 100px; } }
        @media (max-width:1200px) { .adslot_1 { width: 468px; height: 60px; } }
    </style>
    <ins class="adsbygoogle adslot_1" style="display:inline-block" data-ad-client="SOME_NUMBER" data-ad-slot="SOME_NUMBER"></ins>
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> 
    <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</section>

As you might notice, I've tried using two variants:

• Using CSS3 media queries (which are commented)
• And using the data-ad-format="horizontal" data attribute.

I've read about these two in this Google Ads article.

None of these actually worked and my ad size remained 728x90px. My ads from Google simply wont resize to their respective size when the browser screen is smaller.

Ideas and help would be appreciated.

My actual website having this problem

---

Update

So I've played around and still achieved nothing. I tried to get closer to Google's examples and use min-width in the media queries instead of max-width. No results. I'm still getting the 728x90 sizes even though it's not included anywhere else except the min-width: 1200px media query and it still refuses to resize. This is really irritating.

<section class="ads col-lg-8 col-md-7 col-sm-7">
    <div class="headline">Advertisement</div>
    <style>
        .adslot_1 { width: 320px; height: 100px; }
        @media (min-width: 768px) { .adslot_1 { width: 468px; height: 60px; } }
        @media (min-width: 992px) { .adslot_1 { width: 320px; height: 100px; } }
        @media (min-width: 1200px) { .adslot_1 { width: 728px; height: 90px; } }
    </style>
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> 
    <!-- IMGzer_Header -->
    <ins class="adsbygoogle adslot_1" style="display:inline-block" data-ad-client="ca-pub-1234" data-ad-slot="XXXXXX"></ins>
    <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</section>
<div class="clearfix"></div>

The CSS/LESS for .ads is still the same as above. The thing that I've noticed is that when I check my code via Firebug, I see this line:

<ins data-ad-slot="XXXXX" data-ad-client="ca-pub-1234" style="display: inline-block; width: 728px; height: 90px;" class="adsbygoogle adslot_1" data-adsbygoogle-status="done"><ins style="display:inline-table;border:none;height:90px;margin:0;padding:0;position:relative;visibility:visible;width:728px;background-color:transparent"><ins style="display:block;border:none;height:90px;margin:0;padding:0;position:relative;visibility:visible;width:728px;background-color:transparent" id="aswift_0_anchor"><iframe width="728" scrolling="no" height="90" frameborder="0" style="left:0;position:absolute;top:0;" name="aswift_0" id="aswift_0" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&amp;&amp;s.handlers,h=H&amp;&amp;H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&amp;&amp;d&amp;&amp;(!d.body||!d.body.firstChild)){if(h.call){setTimeout(h,0)}else if(h.match){try{h=s.upd(h,i)}catch(e){}w.location.replace(h)}}" allowtransparency="true" hspace="0" vspace="0" marginheight="0" marginwidth="0"></iframe></ins></ins></ins>

Where did this code get the width and height? The width is 728 and the height is 90. It's like they're fixed there somehow and they are ignoring my media queries totally. I'm absolutely certain that I choose Responsive unit in the AdSense settings.

What is it that I'm not seeing?

Answer 1

the class (.) is less than the ID(#) (terms of styles). google ads have their own styles written in JS.

<div class="least" id="medium"></div>

<style type="text/css">
     .least{
               width:100px;
               height:100px;
               background-color:red;
           }
     #medium{
               width:200px;
               height:200px;
               background-color:green;
           }
</style> 

the best way to handle styles google ads

<div id="google-ads-1"></div>

 //Calculate the width of available ad space:

<script type="text/javascript"> 
      ad = document.getElementById('google-ads-1');

      if (ad.getBoundingClientRect().width) {
          adWidth = ad.getBoundingClientRect().width; // for modern browsers 
      } else {
          adWidth = ad.offsetWidth; // for old IE 
      }

      /* Replace ca-pub-XXX with your AdSense Publisher ID */ 
            google_ad_client = "ca-pub-XXX";

      /* Replace 1234567890 with the AdSense Ad Slot ID */ 
            google_ad_slot = "1234567890";

      /* Do not change anything after this line */
            if ( adWidth >= 728 )
        google_ad_size = ["728", "90"];  /* Leaderboard 728x90 */
      else if ( adWidth >= 468 )
        google_ad_size = ["468", "60"];  /* Banner (468 x 60) */
      else if ( adWidth >= 336 )
        google_ad_size = ["336", "280"]; /* Large Rectangle (336 x 280) */
      else if ( adWidth >= 300 )
        google_ad_size = ["300", "250"]; /* Medium Rectangle (300 x 250) */
      else if ( adWidth >= 250 )
        google_ad_size = ["250", "250"]; /* Square (250 x 250) */
      else if ( adWidth >= 200 )
        google_ad_size = ["200", "200"]; /* Small Square (200 x 200) */
      else if ( adWidth >= 180 )
        google_ad_size = ["180", "150"]; /* Small Rectangle (180 x 150) */
      else
        google_ad_size = ["125", "125"]; /* Button (125 x 125) */

      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>

see documentation easy.