Responsive Ads with Bootstrap

[Kurono_Kei]

I’m changing site design to Bootstrap with responsive AdSense units.
I'm sticking with original bootstrap breakpoint sizes and adding one additional for 320px Portrait mobile viewport.

/* Large Devices, .visible-lg-* */ @media (min-width: 1200px) 
/* Medium Devices, .visible-md-* */ @media (min-width: 992px) and (max-width: 1199px) 
/* Small Devices, .visible-sm-* */ @media (min-width: 768px) and (max-width: 991px) 
/* Extra Small Devices, .visible-xs-* */ @media (min-width: 321px) and (max-width: 767px) 
/* Mobile 320px Portrait */@media (max-width: 320px)

I have 7 possible placements on ads, which I show and hide depending on the break point.

Something like this:

.frontPosition1 { display: inline-block; width: 300px; height: 250px; } 
.frontPosition2 { display: inline-block; width: 300px; height: 250px; } 
.frontPosition3 { display: inline-block; width: 300px; height: 250px; } 
.frontPosition4 { display: inline-block; width: 300px; height: 250px; } 
.frontPosition5 { display: inline-block; width: 300px; height: 250px; } 
.frontPosition6 { display: inline-block; width: 300px; height: 250px; } 
.frontPosition7 { display: inline-block; width: 300px; height: 250px; } 


@media (min-width: 768px) and (max-width: 991px) { 
 .frontPosition1 { width: 728px; height: 90px; } 
 .frontPosition2 { display: none; } 
 .frontPosition3 { width: 160px; height: 600px; } 
 .frontPosition4 { display: none; } 
 .frontPosition5 { display: none; } 
 .frontPosition6 { width: 728px; height: 90px; } 
 .frontPosition7 { display: none; } 

   
 .frontPosition1Decoration { 
 margin-left: 10px; 
 margin-bottom: 10px; 
 } 
 .frontPosition2Decoration { } 
 .frontPosition3Decoration { 
 margin-top: 10px; 
 margin-left: 10px; 
 margin-bottom: 10px; 
 float: right !important; 
 } 
 .frontPosition4Decoration { } 
 .frontPosition5Decoration { } 
 .frontPosition6Decoration { 
 margin-left: 10px; 
 margin-bottom: 10px; 
 padding-left: 15px; 
 } 
 .frontPosition7Decoration { } 
 
}

for

<div class="frontPosition1Decoration"> 

<div class="frontPosition1"> 
<img class="img-responsive" data-src="holder.js/100%x100%/social/text: front Location 1"> 
</div> 

</div>

In some cases I have additional breakpoints for decoration only

/*Problem with text beside AD*/ 
@media (min-width: 321px) and (max-width: 529px) { 
 .frontPosition4Decoration { 
 width:100%; 
 } 
}

I use one class (frontPosition1) for ad sizing, and the other (frontPosition1Decoration) for fine positioning etc.

Is this somehow breaking AdSense Policies?
Are there any better ways for doing this?

[webcentric]

From: [support.google.com ]

Techniques to avoid: "Hiding ad units at anytime (e.g., display:none), unless you're implementing a responsive ad unit."

There are hiding techniques for responsive ad units.

[support.google.com ]

I'll confess to not fully understanding what's going on in the following line...

<img class="img-responsive" data-src="holder.js/100%x100%/social/text: front Location 1">

...this is where I'd expect ad code, not an image. I'm not sure why you can't just put responsive code here and hide it using techniques described in the second link above. You just need to make sure no more than three ads actually display in any give screen size.

Bootstrap works great with responsive units IMHO. Your approach may be a bit more complex than it needs to be (but I can't be sure without seeing the js). You can also use jQuery as described here [webmasterworld.com ] to load different ads in the same container depending on the device. There are a variety of ways to go.

[Kurono_Kei]

holder.js is just java script for image placeholders. I'm just using it to test how site is going to look like with responsive ads.
[imsky.github.io...]


On live site with actual adsense I will replace

<div class="frontPosition1"> 
<img class="img-responsive" data-src="holder.js/100%x100%/social/text: front Location 1"> 
</div>

with

<ins class="adsbygoogle frontPosition1"
 style="display:inline-block;"
 data-ad-client="ca-pub-1234"
 data-ad-slot="5678"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

AdSense example from [support.google.com...]



>>Your approach may be a bit more complex than it needs to be (but I can't be sure without seeing the js

I'm not using any JS (for AdSense).

[webcentric]

Understood. I think you need to understand that what you're proposing is "hiding" Adsense ads with display:none (on the container it's in) which is not allowed. If ad code is in your markup but the ad is hidden from view (except as described in the link I provided), you're asking for trouble. The hidden Javascript in the Ad code will still execute but no ad will show (because the container is hidden). That's my take on your plan.

Having said that, if you use a responsive ad that hides itself as Google describes, you should be OK. The ad code above doesn't do that but it's a fairly simple matter to fix that. Just look at Google's examples.

[Kurono_Kei]

<div class="frontPosition1Decoration"> 

<ins class="adsbygoogle frontPosition1"
 style="display:inline-block;"
 data-ad-client="ca-pub-1234"
 data-ad-slot="5678"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

</div>

How am I "hiding" ad with the container it's in?

How is it different than this?

<style type="text/css">
.adslot_1 { display:inline-block; width: 320px; height: 50px; }
@media (max-width: 400px) { .adslot_1 { display: none; } }
@media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }
@media (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } }
</style>
<ins class="adsbygoogle adslot_1"
 data-ad-client="ca-pub-1234"
 data-ad-slot="5678"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

[webcentric]

You know what? After looking more closely, I stand corrected. You're doing what Google specifies as far as I can see. I wasn't paying attention to the fact that the style portion is not really part of the ad. It's just a class attached to the ins tag.I think you're fine. The confusion is all mine. Just make sure no more than three ads show up in any given resolution.

[Kurono_Kei]

Thank you! I just wanted to check if I'm on the right track