CODEWITHSUNDEEP
htmlcssresponsive-designmedia-queriesadsense
dev9
dev9

Reputation: 2382

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;
}

Upvotes: 2

Views: 3896

Answers (3)

consuela
consuela

Reputation: 1703

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

Upvotes: 7

dmlb
dmlb

Reputation: 11

https://support.google.com/adsense/answer/3213689

For example, if you have a with a width of 30% and you place our responsive ad code within the , then depending on the width of the user's screen, we’ll automatically serve different ad sizes. If your page is viewed on a tablet with a width of 1024px, we'll serve a 307x250 ad, and if it's viewed on a 21" desktop PC with a 1680px width, we'll serve a 504x60 ad.

Meaning when the screen changes it keeps whichever was the first one to load. It's not actually responsive.

Upvotes: 1

SimpleDesign
SimpleDesign

Reputation: 1161

I read on adsense blog that they plan to fix that, which means that its a knows issue.

Upvotes: 0

Related Questions