Abo Hani Abo Hani - 6 months ago 81
CSS Question

Google Adsense Responsive Ads Not Showing

In the following link here, i have 3 ads, Right / Left / Header Ads. They're using Responsive Units, the status is "Active", the problem is the Responsive ads are not showing, Googling revealed that it's caused by the CSS theming, maybe the Ad units are not taking the size of the parent div .

I've tried the following :

<div class="right-ad">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:inline"
data-ad-client="ca-pub-1588985522291479"
data-ad-slot="8975496541"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>


2 :

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


Still blank, the CSS is as the following ( min 950px ) :

margin-right: 1%;
position: relative;
width: 13%;
height: 100%;
margin-top:1em;
float:right;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
border-bottom-left-radius: 2px;
box-shadow: rgba(0, 0, 0, 0.0980392) 0px 2px 4px, rgba(0, 0, 0, 0.0980392) 0px 0px 3px;


Why it's still blank ?

Edit :

</div>

<div class="left-ad">
<script async
src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-1588985522291479"
data-ad-slot="8975496541"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

Answer
<ins class="right-ad"
 style="display:inline"

Did you add this to the ad's HTML? You are not supposed to change the ad code. For data-ad-format="auto" the ad will adapt to the container's size. Simply remove what you added to the ad code and change the container instead. In your case, the <div class="right-ad"> div.

This is what a regular ad code looks like

<div class="my-container" style="width: 500px; height: 300px">

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

</div>

So, your style="display:inline" should be

style="display:block"