Responsive Adsense Unit Breaking Bootstrap Panel

Question

How do I prevent Adsense responsive unit placed similar to the code below from breaking out of the panel? In my experience the banner breaks the pannel and takes full width. The code used for Adsense responsive unit is the default code provided by Google.

<div class="col-md-12" style="padding-top:20px;">
    <div class="panel panel-default panel-profile m-b-md">
        <div class="panel-body text-center" style="padding: 5px 0 5px 0">
            <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
            <!-- Thank You -->
            <ins class="adsbygoogle"
                 style="display:block;"
                 data-ad-client="ca-pub-xxxxxx"
                 data-ad-slot="xxxxxx"
                 data-ad-format="auto"></ins>
            <script>
                (adsbygoogle = window.adsbygoogle || []).push({});
            </script>
        </div>
    </div>
</div>

Your assistance is appreciated.

do you mean the ad unit is removed from the flow? It would be lot better if you add a sample markup of the ad, with any computed css on it. — karthick, Jul 13 '17 at 21:12
Please add some sample markup that reproduces the problem. Doesn't have to be a full ad - just the same CSS or whatever they're using that causes the ad to mess up the column. — Michael Coker, Jul 13 '17 at 21:17
@MichaelCoker the only css I use to style the ads is display:block; I have discovered that the add centers itself in the middle of the page rather than the panel so it's neglecting the panel width and going to parent. — Techy, Jul 13 '17 at 21:49
@MichaelCoker done, please see edit above, I have included an image and shown a picture, thank you so much — Techy, Jul 13 '17 at 21:56
Thanks but that doesn't render an ad for me https://codepen.io/mcoker/pen/yXZWpr — Michael Coker, Jul 13 '17 at 21:59
from your comments it looks like there is a absolute style somewhere that is causing it to take the window's width. why not add position: relative to the panel-body? that will make the element to take the panel's width — karthick, Jul 13 '17 at 21:59
I am a guessing that u are trying to style content within an iframe here ? If yes then here is something that you should read https://stackoverflow.com/questions/36512542/edit-css-of-elements-within-iframe?rq=1 — Eggineer, Jul 18 '17 at 07:29
you codepen URL is not rendering add, i believe some of you CSS is creating this issue, i suggest to past your live site URL to further debug. — Chirag S Modi, Jul 19 '17 at 07:57
There is an option to have responsive images in google adsense, however they only adapt to the page size on load, if you resize the page afterwards they will not resize with the page. — Ginger Squirrel, Jul 20 '17 at 11:49

score 3 · Answer 1 · answered Jul 13 '17 at 21:14

I have set up a Plunker test and to me everything looks ok: https://plnkr.co/edit/YTVHcR2SjMdEPyaM0Owa?p=preview

<!DOCTYPE html>
<html>

<head>
  <link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <script data-require="jquery@2.2.4" data-semver="2.2.4" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  <script data-require="bootstrap@3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
  <script>
    $(document).ready(function() {
      (adsbygoogle = window.adsbygoogle || []).push({})
    })
  </script>
</head>

<body>
  <h1>Hello Plunker!</h1>
  <div class="col-md-12" style="padding-top:20px;">
    <div class="panel panel-default panel-profile m-b-md">
      <div class="panel-body text-center" style="padding: 5px 0 5px 0">
        <!-- adsense responsive unit code -->
        <ins class="adsbygoogle" data-ad-client="ca-pub-9482555242423991" data-ad-slot="1928867468" data-ad-format="auto"></ins>
      </div>
    </div>
  </div>
</body>

</html>

CSS:

.adsbygoogle {
  display: inline-block;
  width:100%;
  overflow: hidden;
}

Hi, the unit I have is responsive so there shouldn't be overflow.... I discovered that the banner is taking page width and not panel width. — Techy, Jul 13 '17 at 21:50
Why was this answer upvoted? You shouldn't have to add class properties to the ins tag. And like Techy said; overflow: hidden - you shouldn't have to use it. Anyone else figured this one out? — PussInBoots, Apr 21 '20 at 12:20
@PussInBoots - you are right. Of course you shouldn't. This is a working hack, not a fix for Google markup. Do you have a better solution, please post it as an answer. — ESP32, Apr 21 '20 at 14:43

Responsive Adsense Unit Breaking Bootstrap Panel

1 Answers1