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.

Romanticist

Answer 1

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>

Altogether

This doesn't solve the problem. First of all, I don't necessarily want a mobile height restriction, and I don't necessarily want to restrict the ad format either. The issue is that the ad stays a fixed size on page reload and often breaks the layout, spilling over into text, which both looks unprofessional and violates adsense policies. – Innovation

Answer 2

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!

Limburg

Thanks for the answer but it does not work. I have already tried the !important but it does not seem to override anything. Also, the ad gets its own style tags a-sync so my container div is already loaded. I can't seem to bend the styles set by the ad itself. – Romanticist

Answer 3

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.

Valediction

I don't think I made myself clear enough. My ads are responsive ad units and they load async, but when I resize my browser they don't react at all. They just stay the same size as they were at first load. Even when creating media queries or setting inline css. The add gets its own style tags and will not bend to my rules. – Romanticist

Yeah, that is true, because the Google Ads will not re-size when you re-size the browser. But, the important is you really want to re-size it? Because when you load website, the ads will display right size for this device, so, you just need make your website responsive for all devices, and then add GA code, it will display good for all size. – Valediction

People occasionally resize their browsers. It is reasonable to want the layout not to break or look grossly unprofessional when the browser is resized. Also, if the ad unit overflows into blocking the site content (a common problem), this violates adsense policy...not to mention annoying the user and making you look incompetent as a designer. – Innovation