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&&s.handlers,h=H&&H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&&d&&(!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?