CODEWITHSUNDEEP
htmlcssadsense
Jon Worek
Jon Worek

Reputation: 351

Responsive Adsense ad unit won't display at 320x50 px

I have a responsive Adsense ad unit that I would like to serve as my footer on my responsive web site. I am using media queries, as described in the Adsense documentation, in order to set the height/width at different screen widths.

Here's my CSS:

<style>

@media (min-width: 320px) {
    .adslot-desktop {
        width: 320px;
        height: 50px;
        display: inline-block;
    }
}

@media (min-width: 500px) {
    .adslot-desktop {
        width: 468px;
        height: 60px;
        display: inline-block;
    }
}
</style>

And here's my HTML:

  <ins class="adsbygoogle adslot-desktop"
   data-ad-client="xxxxx"
   data-ad-slot="xxxxxx"
   data-ad-format="auto"></ins>

At screen widths over 500px, I get the expected 468x60 ad. However, below 500px, I'm getting a 320x100 ad.

Why is it not giving me the 320x50 ad like it would appear that I'm specifying?

Upvotes: 3

Views: 837

Answers (2)

galeksic
galeksic

Reputation: 2176

I think you'll need to remove data-ad-format, because data-ad-format is smart sizing:

We calculate the required size dynamically based on the width of the ad unit’s parent container, then determine what's the best standard height to go with that width.

About responsive ad units:
https://support.google.com/adsense/answer/3213689

What you want is "exact size per screen width":

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

Create a responsive ad unit > Advanced > Exact size per screen width: https://support.google.com/adsense/answer/3543893#adv

Upvotes: 4

Victor Luna
Victor Luna

Reputation: 1814

I used to have a problem like this in WP and the only think that I did was to change the order of the media queries. Not sure if it will be the same here but you can try to do that. Highest px at the top and then going down.

** I made it work using max-width instead

@media (max-width: 500px) {
    .adslot-desktop {
        width: 468px;
        height: 60px;
        display: inline-block;
    }
}

@media (max-width: 320px) {
    .adslot-desktop {
        width: 320px;
        height: 50px;
        display: inline-block;
    }

}

Upvotes: 0

Related Questions