How to make responsive Google-adsense ads scale on resize?

Question

I am using google adsense responsive ads (with Bootstrap) and it works properly on page load. Also in a hand-held device it detects the orientation properly and adjusts the ads immediatly.

However, when I resize my browser it does not react to it. Weird to claim responsiveness when there is no build in system to detect screen resize. I have thought to add an eventlistener, but is this a good work around or will it break? I also thought of loading in different ad sizes with a few break point but I would like to avoid that and just use the "responsive" ad.

Thanks in advance for any suggestions.

Answer 1

First, assign the height and width of the div you want the ad to fit in, using either percents or px (percents are easily scalable).

Then, using CSS create media queries to have the height and width change of the ad div based on the height and width of the screen viewing.

Next, add something like .adDiv iframe { max-width:100% !important; max- height:100% !important;} to your CSS. This tells the browser to render the ad (assuming it's an iframe) to the full scale of the div and the !important overrides any CSS set by the ad or any plugins.

Hope this helped!

Answer 2

Using Google Adsense responsive ad unit with Asynchronous. It display very well for all website size, It will load after your website loaded complete.

So, you need to write CSS for responsive for all devices first, and Google Adsense will load late, it will not make your website broken responsive design. Re-size your screen is not right at this case because your website loaded completed.

Answer 3

In the responsive ad, change data-ad-format "auto" to "horizontal"

data-ad-format="horizontal"

Also add a media query mobile height restriction.

.adsense-mobile {
    height: 60px;
}

Final:

<ins class="adsbygoogle adsense-mobile"
             style="display:block"
             data-ad-client="ca-pub-XXXXXX"
             data-ad-slot="XXXXXX"
             data-ad-format="horizontal"></ins>
        <script>
            (adsbygoogle = window.adsbygoogle || []).push({});
        </script>