Responsive Adsense ad resizing with screen orientation change (while using Bootstrap for layout)

Question

On my website I am using Bootstrap 3.2 for responsive design and I am trying to embed Adsense responsive adds there. I am having problems with orientation changes: I would expec

Answer 1

I'm mainly shooting here, cause it's not a lot of information here to be fair, but:

What happens if you add style="display:block;" and also data-format="auto" to your ads?

If this is not going to help, I guess media queries are your friend in this matter.

Answer 2

Try using this - https://github.com/mattnish/rad

I just used it in one of my projects and even though it says "outdated" it works perfectly.

The problem with adsense "responsive ads" is that it is responsive only on initial load.

Answer 3

Here is my take on this one. I used advanced mode with a responsive ad unit and put in the following media queries.

<style>
.myclass-responsive { width: 320px; height: 100px; }
@media (min-width: 768px) and (min-height: 768px)  { .myclass-responsive { width: 728px; height: 90px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- myclass-responsive -->
<ins class="adsbygoogle myclass-responsive"
    style="display:inline-block"
    data-ad-client="XXXX"
    data-ad-slot="YYYY"></ins>
<script>
    (adsbygoogle = window.adsbygoogle || []).push({});
</script>

The point being that the ads in advanced mode are loaded based on the device viewport dimension but do NOT resize dynamically. The default smart resizing mode produced mixed results with my layout and would occasionally break it on dynamic resize. Using (min-width: 768px) and (min-height: 768px) in a Bootstrap layout with a responsive ad unit in advanced mode seems to fix any resizing issue I had (well on the 5 devices I tested at least). However you may get undersized ads for some devices but that the story about it ... you can't get it all.

Answer 4

Ads from AdSense, even responsive ones, are loaded based on your screen size and orientation one time - when the webpage is loaded. Of course, you can try to reload part of page where your ad is served, but then you will have a problems with inner iframe elements (AdSense don't like to be in iframes).

Answer 5

So it turns out the blog post I was quoting is about advanced mode (mode which allows specifying exact ad size via CSS). Even though more than a year ago Google recognized the problem, the advanced ads are not resizing automatically when screen orientation chages.

The AdSense documentation states that responsive ads resize with orientation changes. That's true, but only for default (not advanced ads).

The advanced mode allows specifying exact ad sizes with @media CSS rules which is nice. But for me it was possible to achieve almost same thing by wrapping default responsive ads with div container. The container's size can also be specified by CSS @media rules, so I have same result as with advanced ads + I get benefit of ads resizing when screen orientation changes.