1. Home
  2. Forums Index
  3. Search Engines and SEO / Google AdSense - Display Ads 12:12 pm May 21, 2026

Forum Moderators: martinibuster

Message Too Old, No Replies

Responsive Ads with Bootstrap

         

Kurono_Kei

12:55 pm on Apr 17, 2015 (gmt 0)

10+ Year Member



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

4:10 pm on Apr 17, 2015 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



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

6:46 pm on Apr 17, 2015 (gmt 0)

10+ Year Member



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

8:12 pm on Apr 17, 2015 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



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

8:24 pm on Apr 17, 2015 (gmt 0)

10+ Year Member 




<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

9:02 pm on Apr 17, 2015 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



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

1:14 pm on Apr 19, 2015 (gmt 0)

10+ Year Member



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

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Search Engines and SEO / Google AdSense - Display Ads 12:12 pm May 21, 2026