html

Media queries for responsive layout AMP

If you are creating a layout in AMP and want to make your webpage responsive, then you can use media queries on our webpage.

<!-- Using Regular media query -->
<style>
    @media (max-width: 680px) {
        section {
            border: 1px solid #ccc;
        }
    }
</style>

<!-- Using media attribute on AMP element -->
<!-- Render image if device has a min width of 650px -->
<amp-img
    media="(min-width: 640px)"
    src="/path/to/image.jpg"
    width="500"
    height="300"
    layout="responsive">
</amp-img>

<!-- Render image if device has a max width of 639px -->
<amp-img
    media="(max-width: 639px)"
    src="/path/to/image.jpg"
    width="400"
    height="250"
    layout="responsive">
</amp-img>

Was this helpful?