Learning AMP: Different AMP-AD Units using Media Query — AMPire.city

Image for post
Image for post
Originally published at https://ampire.city

What Will I Learn?

Requirements:

Working Example

AMP-AD AdSense Code Example

<amp-ad 
width="970"
height="90"
media="(min-width: 728px)"
layout="responsive"
type="adsense"
class="adsbygoogle ads_mystyle"
data-ad-format="auto"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxxxxx">
</amp-ad>
<amp-ad
width="300"
height="250"
media="(max-width: 727px)"
layout="responsive"
type="adsense"
class="adsbygoogle ads_mystyle"
data-ad-format="auto"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxxxxx">
</amp-ad>

How it Works

... media="(max-width: 727px)" ...

Useful links

Travel Blogger, Web Designer & AMP Developer | Travel & History Journal: https://www.ctdots.eu | AMP Development & Web Design Tutorials: https://ampire.city

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store