How To Make Responsive Adsense Link Ad Unit

No like other type ad, Adsense link ad is not available in responsive size. To make responsive, we should to modify first. Link ad in this blog also modified too. We use a CSS display:block and display:none to manipulate in Media Queries. How To Make Responsive Adsense Link Ad Unit

Updates

Adsense now support responsive Link Ad Unit

As we know, there are 6 link ad sizes.

728 x 15 (Horizontal Large)
468 x 15 (Horizontal Medium)
200 x 90 (Vertical X-Large)
180 x 90 (Vertical Large)
160 x 90 (Vertical Medium)
120 x 90 (Vertical Small)

CSS Code

To make all link ads works on different resolution, we need a modify CSS code. Go to Template > Edit HTML and find ]]></b:skin>. Copy and paste this code below above that code

@media screen {
}
@media screen and (max-width: 767px) {
.link-ad728{display:none}
.link-ad468{display:block}
}
@media screen and (max-width: 479px) {
.link-ad468{display:none}
.link-ad200{display:block}
}

SAVE

HTML Code

Now, go to Layout. Copy and paste this code below in HTML/JavaScript widget

<div class='link-ad728'>
<!-- ADSENSE 728 X 15 HERE -->
</div>
<div class='link-ad468'>
<!-- ADSENSE 468 X 15 HERE -->
</div>
<div class='link-ad200'>
<!-- ADSENSE 200 X 90 HERE -->
</div>

Result

Here is the result with those steps.

when the resolution > 767px, ad link size 728 x 15 will be appeared. Both 468 x 15 and 200 x 90 not appear
when the resolution < 767px and > 479px, ad link size 728 x 15 will be not appeared. 468 x 15 appear and 200 x 90 not appear
when the resolution < 479px, both ad link size 728 x 15 and 468 x 15 not appear, 200 x 90 appear

you can edit the name class for each link ads as you want and it must same name in HTML code
Media Queries maybe different with your current code (if your blog is responsive)
this trick also works with other type ads - you can add another link ad size. just add new code or adjust it