title: Displaying responsive Google Ads - CSS problems
body: <p>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 <a href="https://support.google.com/adsense/answer/2953032?hl=en" rel="nofollow">Google's Ad unit sizes</a>.</p>
  
  <p>So for different screen sizes, I show fitting ad sizes from that page, like so (Complete LESS for the ad space):</p>
  
  <pre><code>.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;
      }
  }
  </code></pre>
  
  <p>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 <code>.headline</code>.</p>
  
  <p>So now, I've placed Google Ads unit's code in the HTML like this:</p>
  
  <pre><code>&lt;section class="ads col-lg-8 col-md-7 col-sm-7"&gt;
      &lt;div class="headline"&gt;Advertisement&lt;/div&gt;
      &lt;!-- IMGzer_Header --&gt; 
      &lt;style type="text/css"&gt;
          .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; } }
      &lt;/style&gt;
      &lt;ins class="adsbygoogle adslot_1" style="display:inline-block" data-ad-client="SOME_NUMBER" data-ad-slot="SOME_NUMBER"&gt;&lt;/ins&gt;
      &lt;script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"&gt;&lt;/script&gt; 
      &lt;script&gt;(adsbygoogle = window.adsbygoogle || []).push({});&lt;/script&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>As you might notice, I've tried using two variants:</p>
  
  <ul>
  <li>Using CSS3 media queries (which are commented)</li>
  <li>And using the <code>data-ad-format="horizontal"</code> data attribute.</li>
  </ul>
  
  <p>I've read about these two in this <a href="https://support.google.com/adsense/answer/3543893#adv" rel="nofollow">Google Ads article</a>.</p>
  
  <p>None of these actually worked and my ad size remained <code>728x90px</code>. My ads from Google simply wont resize to their respective size when the browser screen is smaller.</p>
  
  <p>Ideas and help would be appreciated.</p>
  
  <p><a href="http://imgzer.org" rel="nofollow">My actual website having this problem</a></p>
  
  <hr>
  
  <h1>Update</h1>
  
  <p>So I've played around and still achieved nothing. I tried to get closer to Google's examples and use <code>min-width</code> in the media queries instead of <code>max-width</code>. No results. I'm still getting the <strong>728x90</strong> sizes even though it's not included anywhere else except the <code>min-width: 1200px</code> media query and it still refuses to resize. This is really irritating.</p>
  
  <pre><code>&lt;section class="ads col-lg-8 col-md-7 col-sm-7"&gt;
      &lt;div class="headline"&gt;Advertisement&lt;/div&gt;
      &lt;style&gt;
          .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; } }
      &lt;/style&gt;
      &lt;script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"&gt;&lt;/script&gt; 
      &lt;!-- IMGzer_Header --&gt;
      &lt;ins class="adsbygoogle adslot_1" style="display:inline-block" data-ad-client="ca-pub-1234" data-ad-slot="XXXXXX"&gt;&lt;/ins&gt;
      &lt;script&gt;(adsbygoogle = window.adsbygoogle || []).push({});&lt;/script&gt;
  &lt;/section&gt;
  &lt;div class="clearfix"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>The CSS/LESS for <code>.ads</code> 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:</p>
  
  <pre><code>&lt;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"&gt;&lt;ins style="display:inline-table;border:none;height:90px;margin:0;padding:0;position:relative;visibility:visible;width:728px;background-color:transparent"&gt;&lt;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"&gt;&lt;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;&amp;amp;s.handlers,h=H&amp;amp;&amp;amp;H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&amp;amp;&amp;amp;d&amp;amp;&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"&gt;&lt;/iframe&gt;&lt;/ins&gt;&lt;/ins&gt;&lt;/ins&gt;
  </code></pre>
  
  <p>Where did this code get the width and height? The width is <em>728</em> and the height is <em>90</em>. It's like they're fixed there somehow and they are ignoring my media queries totally. I'm absolutely certain that I choose <em>Responsive unit</em> in the AdSense settings.</p>
  
  <p>What is it that I'm not seeing?</p>