How to make adsense ads responsive per screen size?

Yes, we can get responsive ad codes from adsense. But that will not fulfill the requirement for ad unit size per screen size. To make the adsense ads responsive per screen size we need to modify the code (allowed by google obviously) a bit. Reasons we need to do this can be like, In desktop view the ad appear as leaderboard, but in mobile it becomes a 300×250 square, what you might not want as you might want to show a similar horizontal sized ad in that place even in mobile view.

So let’s see how we can do that.

1. By specifying the ad format:

Consider the following as your responsive ad code.

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-XXXXXXX"
     data-ad-slot="XXXXXXX"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Here what you have to do is, you have to change the value of the attribute data-ad-format.

The value of data-ad-format can be

1. horizontal: All ads will be horizontal such as 728×90, 970×90, 468×60, 320×100 etc. based on available space.
2. rectangle: All ads will be rectangle such as 336×280, 350×250 etc. based on available space.
3. vertical: All ads will be vertical such 300×600, 160×600 etc. base on available space.
4. auto: This is default for responsive ad unit. 

Any combination of the above 3 will also work, such as, “horizontal, rectangle”

2. Exact ad unit size per screen width example:

You can use @media query in CSS to gain more control over the size of the ad unit. Consider the following as your responsive ad code.

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle siteTopAdCode "
     style="display:block"
     data-ad-client="ca-pub-XXXXXXX"
     data-ad-slot="XXXXXXX"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Here, add a class to the </ins> tag along with the default adsbygoogle class, for example, siteTopAdCode and then style siteTopAdCode class in CSS as follows

@media (min-width: 320px) { .siteTopAdCode { width: 320px; height: 100px; margin: 0 auto; } }
@media (min-width: 468px) { .siteTopAdCode { width: 468px; height: 60px; margin: 0 auto; } }
@media (min-width: 728px) { .siteTopAdCode { width: 728px; height: 90px; margin: 0 auto; } }
@media (min-width: 970px) { .siteTopAdCode { width: 970px; height: 90px; margin: 0 auto; } }

Please note carefully that we have added our class siteTopAdCode in the class attribute of the </ins> tag, as simply if you do not add the class, the styles will not be used on it.

Here our responsive ad unit will change with screen sizes as follows

1. Screen bigger than 970px: Ad unit will be a 970×90 horizontal ad
2. Screen bigger than 728px but smaller than 970px: Ad unit will be a 728×90 horizontal ad
3. Screen bigger than 468px but smaller than 728px: Ad unit will be a 468×60 horizontal ad
4. Screen bigger than 320px but smaller than 468px: Ad unit will be a 320×100 horizontal ad