Responsive AdSense

[dutchbb]

Gotcha. CSS Amateur hour. It looks like it's working, however I'd say it's not working the way that native in-article ads are supposed to work. When they work as intended they stretch across end to end, especially on mobile. By defining the size it looks like it's basically loading 3 different ad units dependent on window size. Which probably is the same as doing the javascript to determine window size and then loading either the 320x100 or 728x90.

Correct. You could remove the responsive code (media queries) and only add margin top and bottom.

<style>
.ad_below_first_post { text-align:center; margin:30px 0 5px 0; }
</style>

text-align:center; is already in the adsense style so you could also leave that out. Wrapping it in a div should also work <div class="margin: 30px 0 5px 0;"> adsense code </div> and you could also call this from extra.css

Changing the adsense style code i would not do to be sure.

 

[upnet]

This is why I am trying to get it to work: "Our experiments show that full-width responsive ads perform better on mobile devices in portrait mode."

I actually think I have the code right, and it's still an issue with height and the ads sometimes overlapping the post.

<style>
.ad_below_first_post { width: 300px; height: 250px; text-align:center; margin:30px 0 5px 0; }
@media(min-width: 500px) { .ad_below_first_post { width: 728px; height: 90px; text-align:center; margin:30px 0 5px 0; } }
@media(min-width: 800px) { .ad_below_first_post { width: 970px; height: 250px; text-align:center; margin:30px 0 5px 0; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle ad_below_first_post"
     style="display:block; text-align:center;"
     data-ad-layout="in-article"
     data-ad-format="fluid"
     data-ad-client="ca-pub-81dfgdfdfdfg25dfg61"
     data-ad-slot="9dgddfgdf4"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

So I am now trying

<style>
.ad_below_first_post { margin-top: 30px;
    margin-bottom: 30px;}</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle ad_below_first_post"
     style="display:block; text-align:center;"
     data-ad-layout="in-article"
     data-ad-format="fluid"
     data-ad-client="ca-pub-8125sdfsdfsdf6sdf1"
     data-ad-slot="9sdfsdfsf"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

Which seems to be working better, but leaves some weird gaps depending on how the ad loads. Occasionally it loads with the top of the ad butted up against the post above it, but it hasn't overlapped, yet...

 

[dutchbb]

I had also same problems with placing it at bottom of threads, adding auto for sides (left and right) helped

<style>
.ad_below_first_post { margin: 30px auto 30px auto; }
</style>