Search code examples
htmlcssresponsive-designmedia-queriesadsense

How to make responsive AdSense unit change its size on browser resize


I am using responsive AdSense unit in advanced mode. It works well until I decide to resize my browser window. Ad does not resize as specified in media query.

<style>
.myad { width: 320px; height: 50px; }
@media(min-width: 500px) { .myad { width: 468px; height: 60px; } }
@media(min-width: 800px) { .myad { width: 728px; height: 90px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle myad"
     style="display:inline-block"
     data-ad-client="XXX"
     data-ad-slot="XXX"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

The CSS is correct. In Firebug, I can see media rules crossed off and replaced by something like:

element.style {
  display: inline-block;
  height: 90px;
  width: 728px;
}

Solution

  • There is no issue with your responsive Google Ads.

    The Google Ads will not resize themselves automatically when you change the browser size. If you refresh your browser then Google Adsense will display/serve new ads with a size that will match the current size of your browser/page.

    I tried to find documentation to verify my statement but I was not able to find anything relevant. My answer is based on my experience from using responsive Google ads and testing them.


    Update 30/05/2019 - ALL AD UNITS RESPONSIVE BY DEFAULT

    An email was sent by Google to Adsense publishers on the 30th of May 2019 informing about upcoming improvements to ad units.

    The email says:

    We’re committed to continuously investing in the modernisation of our advertising products. As a result, there are some important changes we're making to some AdSense features that you have used or configured in the past. Your Ads tab will be updated in the coming weeks to reflect the following changes:

    Ad sizes
    We've made it easier to create and manage ad units. All ad units will be created Responsive by default to adjust to different screen sizes on mobile and desktop for increased performance and flexibility. If you do need further customisation, you’ll still be able to create custom sized ad units.

    So, in the coming weeks all ads will be Responsive be default. Here are two Google Adsense help pages with more information:

    About responsive ad units

    Create a responsive ad unit